@kenyaemr/esm-bed-management-app 1.0.1-pre.7 → 8.0.2

package/src/{bed-admission/bed-type → bed-type}/bed-type-administration-table.component.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Button,
   DataTable,
@@ -14,27 +14,23 @@ import {
   TableHeader,
   TableRow,
   Tile,
-} from "@carbon/react";
-import { Add, Edit } from "@carbon/react/icons";
-import {
-  isDesktop as desktopLayout,
-  useConfig,
-  useLayoutType,
-} from "@openmrs/esm-framework";
-import { CardHeader, ErrorState } from "@openmrs/esm-patient-common-lib";
-import type { BedTypeData } from "../../types";
-import { useBedType } from "../../summary/summary.resource";
-import Header from "../../header/header.component";
-import BedTypeForm from "./new-bed-type-form.component";
-import styles from "../../bed-administration/bed-administration-table.scss";
-import EditBedTypeForm from "./edit-bed-type.component";
+} from '@carbon/react';
+import { Add, Edit } from '@carbon/react/icons';
+import { ErrorState, isDesktop as desktopLayout, useLayoutType } from '@openmrs/esm-framework';
+import type { BedTypeData } from '../types';
+import { useBedType } from '../summary/summary.resource';
+import Header from '../header/header.component';
+import BedTypeForm from './new-bed-type-form.component';
+import styles from '../bed-administration/bed-administration-table.scss';
+import { CardHeader } from '../card-header/card-header.component';
+import EditBedTypeForm from './edit-bed-type.component';
 
 const BedTypeAdministrationTable: React.FC = () => {
   const { t } = useTranslation();
-  const headerTitle = t("bedType", "Bed Type");
+  const headerTitle = t('bedType', 'Bed Type');
   const layout = useLayoutType();
-  const isTablet = layout === "tablet";
-  const responsiveSize = isTablet ? "lg" : "sm";
+  const isTablet = layout === 'tablet';
+  const responsiveSize = isTablet ? 'lg' : 'sm';
   const isDesktop = desktopLayout(layout);
   const [showEditBedModal, setShowEditBedModal] = useState(false);
   const [isBedDataLoading, setIsBedDataLoading] = useState(false);
@@ -47,20 +43,20 @@ const BedTypeAdministrationTable: React.FC = () => {
   const pageSizes = [10, 20, 30, 40, 50];
   const tableHeaders = [
     {
-      header: t("name", "Name"),
-      key: "name",
+      header: t('name', 'Name'),
+      key: 'name',
     },
     {
-      header: t("displayName", "Display Name"),
-      key: "displayName",
+      header: t('displayName', 'Display Name'),
+      key: 'displayName',
     },
     {
-      header: t("description", "Description"),
-      key: "description",
+      header: t('description', 'Description'),
+      key: 'description',
     },
     {
-      key: "actions",
-      header: t("actions", "Actions"),
+      key: 'actions',
+      header: t('actions', 'Actions'),
     },
   ];
 
@@ -81,8 +77,8 @@ const BedTypeAdministrationTable: React.FC = () => {
               setShowEditBedModal(true);
               setAddBedTypeModal(false);
             }}
-            kind={"ghost"}
-            iconDescription={t("editBedType", "Edit Bed Type")}
+            kind={'ghost'}
+            iconDescription={t('editBedType', 'Edit Bed Type')}
             hasIconOnly
             size={responsiveSize}
             tooltipAlignment="start"
@@ -120,11 +116,7 @@ const BedTypeAdministrationTable: React.FC = () => {
 
       <div className={styles.widgetCard}>
         {showBedTypeModal ? (
-          <BedTypeForm
-            onModalChange={setAddBedTypeModal}
-            showModal={showBedTypeModal}
-            mutate={mutate}
-          />
+          <BedTypeForm onModalChange={setAddBedTypeModal} showModal={showBedTypeModal} mutate={mutate} />
         ) : null}
         {showEditBedModal ? (
           <EditBedTypeForm
@@ -142,28 +134,19 @@ const BedTypeAdministrationTable: React.FC = () => {
             <Button
               kind="ghost"
               renderIcon={(props) => <Add size={16} {...props} />}
-              onClick={() => setAddBedTypeModal(true)}
-            >
-              {t("addBedtype", "Add Bed Type")}
+              onClick={() => setAddBedTypeModal(true)}>
+              {t('addBedtype', 'Add Bed Type')}
             </Button>
           ) : null}
         </CardHeader>
-        <DataTable
-          rows={tableRows}
-          headers={tableHeaders}
-          isSortable
-          size={isTablet ? "lg" : "sm"}
-          useZebraStyles
-        >
+        <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>
+                      <TableHeader>{header.header?.content ?? header.header}</TableHeader>
                     ))}
                   </TableRow>
                 </TableHead>
@@ -171,9 +154,7 @@ const BedTypeAdministrationTable: React.FC = () => {
                   {rows.map((row) => (
                     <TableRow key={row.id}>
                       {row.cells.map((cell) => (
-                        <TableCell key={cell.id}>
-                          {cell.value?.content ?? cell.value}
-                        </TableCell>
+                        <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
                       ))}
                     </TableRow>
                   ))}
@@ -183,21 +164,16 @@ const BedTypeAdministrationTable: React.FC = () => {
                 <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>
+                      <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>
+                    <p className={styles.separator}>{t('or', 'or')}</p>
                     <Button
                       kind="ghost"
                       size="sm"
                       renderIcon={(props) => <Add size={16} {...props} />}
-                      onClick={() => setAddBedTypeModal(true)}
-                    >
-                      {t("bedType", "Add Bed Type")}
+                      onClick={() => setAddBedTypeModal(true)}>
+                      {t('bedType', 'Add Bed Type')}
                     </Button>
                   </Tile>
                 </div>

package/src/{bed-admission/bed-type → bed-type}/edit-bed-type.component.tsx

@@ -1,11 +1,11 @@
-import React, { useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { showToast, showNotification, useConfig } from "@openmrs/esm-framework";
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { showToast, showNotification, useConfig } from '@openmrs/esm-framework';
 
-import { editBedType, useBedType } from "../../summary/summary.resource";
-import { BedTypeDataAdministration } from "../../bed-administration/bed-administration-types";
-import { BedTypeData, Mutator } from "../../types";
-import BedTypeAdministrationForm from "./bed-type-admin-form.component";
+import { editBedType, useBedType } from '../summary/summary.resource';
+import { type BedTypeDataAdministration } from '../bed-administration/bed-administration-types';
+import { type BedTypeData, type Mutator } from '../types';
+import BedTypeAdministrationForm from './bed-type-admin-form.component';
 
 interface EditBedTypeFormProps {
   showModal: boolean;
@@ -14,35 +14,27 @@ interface EditBedTypeFormProps {
   mutate: Mutator;
 }
 
-const EditBedTypeForm: React.FC<EditBedTypeFormProps> = ({
-  showModal,
-  onModalChange,
-  editData,
-  mutate,
-}) => {
+const EditBedTypeForm: React.FC<EditBedTypeFormProps> = ({ showModal, onModalChange, editData, mutate }) => {
   const { t } = useTranslation();
-  const headerTitle = t("editBedType", "Edit Bed Type");
+  const headerTitle = t('editBedType', 'Edit Bed Type');
   const { bedTypeData } = useBedType();
   const availableBedTypes = bedTypeData ? bedTypeData : [];
   const handleCreateQuestion = useCallback(
     (formData: BedTypeDataAdministration) => {
       const bedUuid = editData.uuid;
       const { name, displayName, description } = formData;
-      const bedPayload = {
+      const bedTypePayload = {
         name,
         displayName,
         description,
       };
-      editBedType({ bedPayload, bedTypeId: bedUuid })
+      editBedType({ bedTypePayload, bedTypeId: bedUuid })
         .then(() => {
           showToast({
-            title: t("formSaved", "Bed Type"),
-            kind: "success",
+            title: t('formSaved', 'Bed Type'),
+            kind: 'success',
             critical: true,
-            description:
-              bedPayload.name +
-              " " +
-              t("saveSuccessMessage", "was saved successfully."),
+            description: bedTypePayload.name + ' ' + t('saveSuccessMessage', 'was saved successfully.'),
           });
 
           mutate();
@@ -50,8 +42,8 @@ const EditBedTypeForm: React.FC<EditBedTypeFormProps> = ({
         })
         .catch((error) => {
           showNotification({
-            title: t("errorCreatingForm", "Error creating bed"),
-            kind: "error",
+            title: t('errorCreatingForm', 'Error creating bed'),
+            kind: 'error',
             critical: true,
             description: error?.message,
           });
@@ -59,7 +51,7 @@ const EditBedTypeForm: React.FC<EditBedTypeFormProps> = ({
         });
       onModalChange(false);
     },
-    [onModalChange, mutate, editData, t]
+    [onModalChange, mutate, editData, t],
   );
 
   return (

package/src/{bed-admission/bed-type → bed-type}/new-bed-type-form.component.tsx

@@ -1,10 +1,10 @@
-import React, { useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { showToast, showNotification, useConfig } from "@openmrs/esm-framework";
-import type { BedTypeData, Mutator } from "../../types";
-import { useBedType } from "../../bed-administration/bed-administration.resource";
-import { saveBedType, useLocationsByTag } from "../../summary/summary.resource";
-import BedTypeAdministrationForm from "./bed-type-admin-form.component";
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { showToast, showNotification, useConfig } from '@openmrs/esm-framework';
+import type { BedTypeData, Mutator } from '../types';
+import { useBedType } from '../bed-administration/bed-administration.resource';
+import { saveBedType, useLocationsWithAdmissionTag } from '../summary/summary.resource';
+import BedTypeAdministrationForm from './bed-type-admin-form.component';
 
 interface BedTypeFormProps {
   showModal: boolean;
@@ -12,42 +12,35 @@ interface BedTypeFormProps {
   mutate: Mutator;
 }
 
-const NewBedTypeForm: React.FC<BedTypeFormProps> = ({
-  showModal,
-  onModalChange,
-  mutate,
-}) => {
+const NewBedTypeForm: React.FC<BedTypeFormProps> = ({ showModal, onModalChange, mutate }) => {
   const { t } = useTranslation();
-  const { admissionLocationTagUuid } = useConfig();
-  const { data: admissionLocations } = useLocationsByTag(
-    admissionLocationTagUuid
-  );
-  const headerTitle = t("addBedType", "Create Bed type");
+  const { data: admissionLocations } = useLocationsWithAdmissionTag();
+  const headerTitle = t('addBedType', 'Create Bed type');
   const { bedTypes } = useBedType();
   const availableBedTypes = bedTypes ? bedTypes : [];
 
   const initialData: BedTypeData = {
-    uuid: "",
-    name: "",
-    displayName: "",
-    description: "",
+    uuid: '',
+    name: '',
+    displayName: '',
+    description: '',
   };
 
   const handleCreateQuestion = useCallback(
     (formData: BedTypeData) => {
       const { name, displayName, description } = formData;
 
-      const bedObject = {
+      const bedTypePayload = {
         name,
         displayName,
         description,
       };
 
-      saveBedType({ bedPayload: bedObject })
+      saveBedType({ bedTypePayload })
         .then(() => {
           showToast({
-            title: t("formCreated", "Add bed Type"),
-            kind: "success",
+            title: t('formCreated', 'Add bed Type'),
+            kind: 'success',
             critical: true,
             description: `Bed ${name} was created successfully.`,
           });
@@ -57,8 +50,8 @@ const NewBedTypeForm: React.FC<BedTypeFormProps> = ({
         })
         .catch((error) => {
           showNotification({
-            title: t("errorCreatingForm", "Error creating bed"),
-            kind: "error",
+            title: t('errorCreatingForm', 'Error creating bed'),
+            kind: 'error',
             critical: true,
             description: error?.message,
           });
@@ -66,7 +59,7 @@ const NewBedTypeForm: React.FC<BedTypeFormProps> = ({
         });
       onModalChange(false);
     },
-    [onModalChange, mutate, t]
+    [onModalChange, mutate, t],
   );
 
   return (

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useLayoutType } from '@openmrs/esm-framework';
+import styles from './card-header.scss';
+
+interface CardHeaderProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+export function CardHeader({ title, children }: CardHeaderProps) {
+  const isTablet = useLayoutType() === 'tablet';
+
+  return (
+    <div className={classNames(isTablet ? styles.tabletHeader : styles.desktopHeader)}>
+      <h4>{title}</h4>
+      {children}
+    </div>
+  );
+}

package/src/card-header/card-header.scss

@@ -0,0 +1,45 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.desktopHeader,
+.tabletHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
+  background-color: $ui-background;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: layout.$spacing-07;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.desktopHeader {
+  height: layout.$spacing-09;
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeader {
+  height: 4.5rem;
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .desktopHeader,
+  .tabletHeader {
+    text-align: right;
+    padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-04 0;
+  }
+}

package/src/config-schema.ts

@@ -1,21 +1,13 @@
-import { Type } from "@openmrs/esm-framework";
-import { boolean } from "zod";
+import { Type } from '@openmrs/esm-framework';
 
 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,
+  admissionLocationTagName: {
+    _type: Type.String,
+    _description: 'Patients may only be admitted to inpatient care in a location with this tag',
+    _default: 'Admission Location',
   },
 };
+
+export interface BedManagementConfig {
+  admissionLocationTagName: string;
+}

package/src/declarations.d.ts

@@ -1,7 +1,7 @@
-declare module "@carbon/react";
-declare module "*.css";
-declare module "*.scss";
-declare module "*.png";
-declare module "*.svg";
+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

@@ -1,16 +1,13 @@
-import React from "react";
-import { Layer, Tile } from "@carbon/react";
-import styles from "./empty-state.scss";
+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) => {
+const EmptyState: React.FC<EmptyStateProps> = ({ msg, helper }: EmptyStateProps) => {
   return (
     <Layer className={styles.layer}>
       <Tile className={styles.tile}>
@@ -30,13 +27,7 @@ const EmptyState: React.FC<EmptyStateProps> = ({
               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}
-            />
+            <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"
@@ -50,13 +41,7 @@ const EmptyState: React.FC<EmptyStateProps> = ({
               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}
-            />
+            <circle fill="#FFF" fillRule="nonzero" cx={40.218} cy={9.755} r={1.13} />
           </g>
         </svg>
         <p className={styles.content}>{msg}</p>

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

@@ -1,17 +1,17 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
-@use "@carbon/type";
+@use '@carbon/type';
 
 .desktopHeading {
   h4 {
-    @include type.type-style("heading-compact-02");
+    @include type.type-style('heading-compact-02');
     color: colors.$gray-70;
   }
 }
 
 .tabletHeading {
   h4 {
-    @include type.type-style("heading-03");
+    @include type.type-style('heading-03');
     color: colors.$gray-70;
   }
 }
@@ -23,26 +23,26 @@
   margin-bottom: layout.$spacing-05;
 
   h4:after {
-    content: "";
+    content: '';
     display: block;
-    width: 2rem;
+    width: layout.$spacing-07;
     padding-top: 0.188rem;
     border-bottom: 0.375rem solid var(--brand-03);
   }
 }
 
 .heading:after {
-  content: "";
+  content: '';
   display: block;
-  width: 2rem;
+  width: layout.$spacing-07;
   padding-top: 0.188rem;
   border-bottom: 0.375rem solid var(--brand-03);
 }
 
 .tile {
-  padding: 2rem;
+  padding: layout.$spacing-07;
   border: 1px solid colors.$gray-20;
-  margin: 1.5rem;
+  margin: layout.$spacing-06;
 }
 
 .layer {
@@ -50,7 +50,7 @@
 }
 
 .content {
-  @include type.type-style("heading-compact-02");
+  @include type.type-style('heading-compact-02');
   color: colors.$gray-70;
   margin-top: layout.$spacing-05;
   margin-bottom: layout.$spacing-03;

package/src/header/header.component.tsx

@@ -1,47 +1,38 @@
-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";
+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 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"]}>
+      <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 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"]}>
+      <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>
+          <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
         </div>
       </div>
     </div>