@kenyaemr/esm-bed-management-app 8.1.1-pre.129 → 8.1.2-pre.154

package/src/bed-type/bed-type-admin-form.component.tsx

@@ -7,17 +7,18 @@ import {
   ComposedModal,
   Form,
   FormGroup,
+  InlineNotification,
   ModalBody,
   ModalFooter,
   ModalHeader,
   Stack,
   TextArea,
   TextInput,
-  InlineNotification,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { getCoreTranslation, type Location } from '@openmrs/esm-framework';
 import type { BedType, BedTypeData } from '../types';
+import styles from '../modals.scss';
 
 const BedTypeAdministrationSchema = z.object({
   name: z.string().max(255),
@@ -26,13 +27,13 @@ const BedTypeAdministrationSchema = z.object({
 });
 
 interface BedAdministrationFormProps {
-  showModal: boolean;
-  onModalChange: (showModal: boolean) => void;
-  availableBedTypes: Array<BedType>;
   allLocations: Location[];
-  handleCreateQuestion?: (formData: BedTypeData) => void;
+  availableBedTypes: Array<BedType>;
+  handleSubmission?: (formData: BedTypeData) => void;
   headerTitle: string;
   initialData: BedTypeData;
+  onModalChange: (showModal: boolean) => void;
+  showModal: boolean;
 }
 
 interface ErrorType {
@@ -40,11 +41,11 @@ interface ErrorType {
 }
 
 const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
-  showModal,
-  onModalChange,
-  handleCreateQuestion,
+  handleSubmission,
   headerTitle,
   initialData,
+  onModalChange,
+  showModal,
 }) => {
   const { t } = useTranslation();
 
@@ -69,7 +70,7 @@ const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
     const result = BedTypeAdministrationSchema.safeParse(formData);
     if (result.success) {
       setShowErrorNotification(false);
-      handleCreateQuestion(formData);
+      handleSubmission?.(formData);
     }
   };
 
@@ -80,7 +81,7 @@ const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
 
   return (
     <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
-      <ModalHeader title={headerTitle} />
+      <ModalHeader className={styles.modalHeader} title={headerTitle} />
       <ModalBody hasScrollingContent>
         <Form>
           <Stack gap={3}>
@@ -92,9 +93,9 @@ const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                   <>
                     <TextInput
                       id="bedName"
-                      labelText={t('bedName', 'Bed Name')}
-                      placeholder={t('bedTypePlaceholder', '')}
                       invalidText={fieldState.error?.message}
+                      labelText={t('bedName', 'Bed name')}
+                      placeholder={t('bedTypePlaceholder', '')}
                       {...field}
                     />
                   </>
@@ -106,15 +107,13 @@ const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                 name="displayName"
                 control={control}
                 render={({ field, fieldState }) => (
-                  <>
-                    <TextInput
-                      id="displayName"
-                      labelText={t('displayName', 'Display Name')}
-                      placeholder={t('displayNamePlaceholder', '')}
-                      invalidText={fieldState.error?.message}
-                      {...field}
-                    />
-                  </>
+                  <TextInput
+                    id="displayName"
+                    invalidText={fieldState.error?.message}
+                    labelText={t('displayName', 'Display name')}
+                    placeholder={t('displayNamePlaceholder', '')}
+                    {...field}
+                  />
                 )}
               />
             </FormGroup>
@@ -123,29 +122,27 @@ const BedTypeAdministrationForm: React.FC<BedAdministrationFormProps> = ({
                 name="description"
                 control={control}
                 render={({ field, fieldState }) => (
-                  <>
-                    <TextArea
-                      rows={2}
-                      id="description"
-                      invalidText={fieldState?.error?.message}
-                      labelText={t('description', 'Description')}
-                      {...field}
-                      placeholder={t('description', 'Enter the bed description')}
-                    />
-                  </>
+                  <TextArea
+                    rows={2}
+                    id="description"
+                    invalidText={fieldState?.error?.message}
+                    labelText={t('description', 'Description')}
+                    {...field}
+                    placeholder={t('enterBedDescription', 'Enter the bed description')}
+                  />
                 )}
               />
             </FormGroup>
 
             {showErrorNotification && (
               <InlineNotification
+                kind="error"
                 lowContrast
-                title={t('error', 'Error')}
-                style={{ minWidth: '100%', margin: '0', padding: '0' }}
+                onClose={() => setShowErrorNotification(false)}
                 role="alert"
-                kind="error"
+                style={{ minWidth: '100%', margin: '0', padding: '0' }}
                 subtitle={t('pleaseFillField', formStateError) + '.'}
-                onClose={() => setShowErrorNotification(false)}
+                title={t('error', 'Error')}
               />
             )}
           </Stack>

package/src/bed-type/bed-type-administration-table.component.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
   DataTable,
   DataTableSkeleton,
+  IconButton,
   InlineLoading,
   Pagination,
   Table,
@@ -18,36 +19,36 @@ import {
 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 { useBedTypes } from '../summary/summary.resource';
+import CardHeader from '../card-header/card-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';
+import Header from '../header/header.component';
+import styles from '../bed-administration/bed-administration-table.scss';
 
 const BedTypeAdministrationTable: React.FC = () => {
   const { t } = useTranslation();
-  const headerTitle = t('bedType', 'Bed Type');
+  const headerTitle = t('bedTypes', 'Bed types');
   const layout = useLayoutType();
   const isTablet = layout === 'tablet';
   const responsiveSize = isTablet ? 'lg' : 'sm';
   const isDesktop = desktopLayout(layout);
-  const [showEditBedModal, setShowEditBedModal] = useState(false);
-  const [isBedDataLoading, setIsBedDataLoading] = useState(false);
-  const [showBedTypeModal, setAddBedTypeModal] = useState(false);
+  const { bedTypes, errorLoadingBedTypes, isLoadingBedTypes, isValidatingBedTypes, mutateBedTypes } = useBedTypes();
+
   const [currentPage, setCurrentPage] = useState(1);
+  const [currentPageSize, setPageSize] = useState(10);
   const [editData, setEditData] = useState<BedTypeData>();
   const [pageSize] = useState(10);
-  const { bedTypeData, isError, loading, validate, mutate } = useBedType();
-  const [currentPageSize, setPageSize] = useState(10);
-  const pageSizes = [10, 20, 30, 40, 50];
+  const [showBedTypeModal, setAddBedTypeModal] = useState(false);
+  const [showEditBedModal, setShowEditBedModal] = useState(false);
+
   const tableHeaders = [
     {
       header: t('name', 'Name'),
       key: 'name',
     },
     {
-      header: t('displayName', 'Display Name'),
+      header: t('displayName', 'Display name'),
       key: 'displayName',
     },
     {
@@ -60,38 +61,37 @@ const BedTypeAdministrationTable: React.FC = () => {
     },
   ];
 
-  const tableRows = useMemo(() => {
-    return bedTypeData?.map((entry) => ({
-      id: entry.uuid,
-      name: entry?.name,
-      displayName: entry?.displayName,
-      description: entry?.description,
-      actions: (
-        <>
-          <Button
+  const tableRows = useMemo(
+    () =>
+      bedTypes?.map((entry) => ({
+        id: entry.uuid,
+        name: entry?.name,
+        displayName: entry?.displayName,
+        description: entry?.description,
+        actions: (
+          <IconButton
+            align="top-start"
             enterDelayMs={300}
-            renderIcon={Edit}
+            kind="ghost"
+            label={t('editBedType', 'Edit bed type')}
             onClick={(e) => {
               e.preventDefault();
               setEditData(entry);
               setShowEditBedModal(true);
               setAddBedTypeModal(false);
             }}
-            kind={'ghost'}
-            iconDescription={t('editBedType', 'Edit Bed Type')}
-            hasIconOnly
-            size={responsiveSize}
-            tooltipAlignment="start"
-          />
-        </>
-      ),
-    }));
-  }, [responsiveSize, bedTypeData, t]);
+            size={responsiveSize}>
+            <Edit />
+          </IconButton>
+        ),
+      })),
+    [responsiveSize, bedTypes, t],
+  );
 
-  if (isBedDataLoading || loading) {
+  if (isLoadingBedTypes) {
     return (
       <>
-        <Header route="Bed Type" />
+        <Header title={t('bedTypes', 'Bed types')} />
         <div className={styles.widgetCard}>
           <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />
         </div>
@@ -99,12 +99,12 @@ const BedTypeAdministrationTable: React.FC = () => {
     );
   }
 
-  if (isError) {
+  if (errorLoadingBedTypes) {
     return (
       <>
-        <Header route="Bed Type" />
+        <Header title={t('bedTypes', 'Bed types')} />
         <div className={styles.widgetCard}>
-          <ErrorState error={isError} headerTitle={headerTitle} />
+          <ErrorState error={errorLoadingBedTypes} headerTitle={headerTitle} />
         </div>
       </>
     );
@@ -112,30 +112,30 @@ const BedTypeAdministrationTable: React.FC = () => {
 
   return (
     <>
-      <Header route="Bed Type" />
+      <Header title={t('bedTypes', 'Bed types')} />
 
       <div className={styles.widgetCard}>
         {showBedTypeModal ? (
-          <BedTypeForm onModalChange={setAddBedTypeModal} showModal={showBedTypeModal} mutate={mutate} />
+          <BedTypeForm onModalChange={setAddBedTypeModal} showModal={showBedTypeModal} mutate={mutateBedTypes} />
         ) : null}
         {showEditBedModal ? (
           <EditBedTypeForm
+            editData={editData}
+            mutate={mutateBedTypes}
             onModalChange={setShowEditBedModal}
             showModal={showEditBedModal}
-            editData={editData}
-            mutate={mutate}
           />
         ) : null}
         <CardHeader title={headerTitle}>
           <span className={styles.backgroundDataFetchingIndicator}>
-            <span>{validate ? <InlineLoading /> : null}</span>
+            <span>{isValidatingBedTypes ? <InlineLoading /> : null}</span>
           </span>
-          {bedTypeData?.length ? (
+          {bedTypes?.length ? (
             <Button
               kind="ghost"
               renderIcon={(props) => <Add size={16} {...props} />}
               onClick={() => setAddBedTypeModal(true)}>
-              {t('addBedtype', 'Add Bed Type')}
+              {t('addBedType', 'Add bed type')}
             </Button>
           ) : null}
         </CardHeader>
@@ -146,7 +146,7 @@ const BedTypeAdministrationTable: React.FC = () => {
                 <TableHead>
                   <TableRow>
                     {headers.map((header) => (
-                      <TableHeader>{header.header?.content ?? header.header}</TableHeader>
+                      <TableHeader key={header.key}>{header.header?.content ?? header.header}</TableHeader>
                     ))}
                   </TableRow>
                 </TableHead>
@@ -164,7 +164,7 @@ 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.content}>{t('noDataToDisplay', '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>
@@ -173,7 +173,7 @@ const BedTypeAdministrationTable: React.FC = () => {
                       size="sm"
                       renderIcon={(props) => <Add size={16} {...props} />}
                       onClick={() => setAddBedTypeModal(true)}>
-                      {t('bedType', 'Add Bed Type')}
+                      {t('addBedType', 'Add bed type')}
                     </Button>
                   </Tile>
                 </div>
@@ -182,7 +182,7 @@ const BedTypeAdministrationTable: React.FC = () => {
                 page={currentPage}
                 pageSize={pageSize}
                 pageSizes={[10, 20, 30, 40, 50]}
-                totalItems={bedTypeData.length}
+                totalItems={bedTypes.length}
                 onChange={({ page, pageSize }) => {
                   setCurrentPage(page);
                   setPageSize(pageSize);

package/src/bed-type/edit-bed-type.component.tsx

@@ -1,55 +1,56 @@
 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 { showSnackbar } from '@openmrs/esm-framework';
+import { editBedType, useBedTypes } from '../summary/summary.resource';
 import { type BedTypeDataAdministration } from '../bed-administration/bed-administration-types';
-import { type BedTypeData, type Mutator } from '../types';
+import { type BedType, type BedTypeData, type Mutator } from '../types';
 import BedTypeAdministrationForm from './bed-type-admin-form.component';
 
 interface EditBedTypeFormProps {
-  showModal: boolean;
-  onModalChange: (showModal: boolean) => void;
   editData: BedTypeData;
-  mutate: Mutator;
+  mutate: Mutator<BedType>;
+  onModalChange: (showModal: boolean) => void;
+  showModal: boolean;
 }
 
-const EditBedTypeForm: React.FC<EditBedTypeFormProps> = ({ showModal, onModalChange, editData, mutate }) => {
+const EditBedTypeForm: React.FC<EditBedTypeFormProps> = ({ editData, mutate, onModalChange, showModal }) => {
   const { t } = useTranslation();
-  const headerTitle = t('editBedType', 'Edit Bed Type');
-  const { bedTypeData } = useBedType();
-  const availableBedTypes = bedTypeData ? bedTypeData : [];
-  const handleCreateQuestion = useCallback(
+  const { bedTypes } = useBedTypes();
+  const headerTitle = t('editBedType', 'Edit bed type');
+
+  const handleUpdateBedType = useCallback(
     (formData: BedTypeDataAdministration) => {
       const bedUuid = editData.uuid;
       const { name, displayName, description } = formData;
+
       const bedTypePayload = {
         name,
         displayName,
         description,
       };
+
       editBedType({ bedTypePayload, bedTypeId: bedUuid })
         .then(() => {
-          showToast({
-            title: t('formSaved', 'Bed Type'),
+          showSnackbar({
+            title: t('bedTypeUpdated', 'Bed type updated'),
+            subtitle: t('bedTypeUpdatedSuccessfully', `${bedTypePayload.name} updated successfully`, {
+              bedType: bedTypePayload.name,
+            }),
             kind: 'success',
-            critical: true,
-            description: bedTypePayload.name + ' ' + t('saveSuccessMessage', 'was saved successfully.'),
           });
 
           mutate();
-          onModalChange(false);
         })
         .catch((error) => {
-          showNotification({
+          showSnackbar({
             title: t('errorCreatingForm', 'Error creating bed'),
+            subtitle: error?.message,
             kind: 'error',
-            critical: true,
-            description: error?.message,
           });
+        })
+        .finally(() => {
           onModalChange(false);
         });
-      onModalChange(false);
     },
     [onModalChange, mutate, editData, t],
   );
@@ -58,9 +59,9 @@ const EditBedTypeForm: React.FC<EditBedTypeFormProps> = ({ showModal, onModalCha
     <>
       <BedTypeAdministrationForm
         onModalChange={onModalChange}
-        availableBedTypes={availableBedTypes}
+        availableBedTypes={bedTypes}
         showModal={showModal}
-        handleCreateQuestion={handleCreateQuestion}
+        handleSubmission={handleUpdateBedType}
         headerTitle={headerTitle}
         initialData={editData}
         allLocations={[]}

package/src/bed-type/new-bed-type-form.component.tsx

@@ -1,32 +1,30 @@
 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 { showSnackbar } from '@openmrs/esm-framework';
+import type { BedType, BedTypeData, Mutator } from '../types';
+import { saveBedType, useBedTypes, useLocationsWithAdmissionTag } from '../summary/summary.resource';
 import BedTypeAdministrationForm from './bed-type-admin-form.component';
 
 interface BedTypeFormProps {
-  showModal: boolean;
+  mutate: Mutator<BedType>;
   onModalChange: (showModal: boolean) => void;
-  mutate: Mutator;
+  showModal: boolean;
 }
 
-const NewBedTypeForm: React.FC<BedTypeFormProps> = ({ showModal, onModalChange, mutate }) => {
+const NewBedTypeForm: React.FC<BedTypeFormProps> = ({ mutate, onModalChange, showModal }) => {
   const { t } = useTranslation();
-  const { data: admissionLocations } = useLocationsWithAdmissionTag();
-  const headerTitle = t('addBedType', 'Create Bed type');
-  const { bedTypes } = useBedType();
-  const availableBedTypes = bedTypes ? bedTypes : [];
+  const { admissionLocations } = useLocationsWithAdmissionTag();
+  const headerTitle = t('createBedType', 'Create bed type');
+  const { bedTypes } = useBedTypes();
 
   const initialData: BedTypeData = {
-    uuid: '',
-    name: '',
-    displayName: '',
     description: '',
+    displayName: '',
+    name: '',
+    uuid: '',
   };
 
-  const handleCreateQuestion = useCallback(
+  const handleCreateBedType = useCallback(
     (formData: BedTypeData) => {
       const { name, displayName, description } = formData;
 
@@ -38,42 +36,39 @@ const NewBedTypeForm: React.FC<BedTypeFormProps> = ({ showModal, onModalChange,
 
       saveBedType({ bedTypePayload })
         .then(() => {
-          showToast({
-            title: t('formCreated', 'Add bed Type'),
+          showSnackbar({
             kind: 'success',
-            critical: true,
-            description: `Bed ${name} was created successfully.`,
+            title: t('bedTypeCreated', 'Bed type created'),
+            subtitle: t('bedTypeCreatedSuccessfully', `${name} created successfully`, {
+              bedType: name,
+            }),
           });
-
           mutate();
-          onModalChange(false);
         })
         .catch((error) => {
-          showNotification({
-            title: t('errorCreatingForm', 'Error creating bed'),
+          showSnackbar({
             kind: 'error',
-            critical: true,
-            description: error?.message,
+            title: t('errorCreatingForm', 'Error creating bed'),
+            subtitle: error?.message,
           });
+        })
+        .finally(() => {
           onModalChange(false);
         });
-      onModalChange(false);
     },
     [onModalChange, mutate, t],
   );
 
   return (
-    <>
-      <BedTypeAdministrationForm
-        onModalChange={onModalChange}
-        allLocations={admissionLocations}
-        availableBedTypes={availableBedTypes}
-        showModal={showModal}
-        handleCreateQuestion={handleCreateQuestion}
-        headerTitle={headerTitle}
-        initialData={initialData}
-      />
-    </>
+    <BedTypeAdministrationForm
+      allLocations={admissionLocations}
+      availableBedTypes={bedTypes}
+      handleSubmission={handleCreateBedType}
+      headerTitle={headerTitle}
+      initialData={initialData}
+      onModalChange={onModalChange}
+      showModal={showModal}
+    />
   );
 };
 

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

@@ -8,7 +8,7 @@ interface CardHeaderProps {
   children: React.ReactNode;
 }
 
-export function CardHeader({ title, children }: CardHeaderProps) {
+function CardHeader({ title, children }: CardHeaderProps) {
   const isTablet = useLayoutType() === 'tablet';
 
   return (
@@ -18,3 +18,5 @@ export function CardHeader({ title, children }: CardHeaderProps) {
     </div>
   );
 }
+
+export default CardHeader;

package/src/header/header.component.tsx

@@ -1,33 +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 {
+  ConfigurableLink,
+  formatDate,
+  InPatientPictogram,
+  PageHeader,
+  PageHeaderContent,
+  useSession,
+} from '@openmrs/esm-framework';
 import styles from './header.scss';
 
 type HeaderProps = {
-  route: string;
-  headerTitle?: string;
+  title: string;
 };
 
-const Header: React.FC<HeaderProps> = ({ route, headerTitle = 'Bed Management' }) => {
+const Header: React.FC<HeaderProps> = ({ title }) => {
   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']}>
+    <PageHeader className={styles.header}>
+      <PageHeaderContent
+        illustration={
+          <ConfigurableLink to={`${window.getOpenmrsSpaBase()}bed-management`}>
+            <InPatientPictogram className={styles.inPatientPictogram} />
+          </ConfigurableLink>
+        }
+        title={title}
+        className={styles.leftJustifiedItems}
+      />
+      <div className={styles.rightJustifiedItems}>
+        <div className={styles.dateAndLocation}>
           <Location size={16} />
           <span className={styles.value}>{userLocation}</span>
           <span className={styles.middot}>&middot;</span>
@@ -35,7 +40,7 @@ const Header: React.FC<HeaderProps> = ({ route, headerTitle = 'Bed Management' }
           <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
         </div>
       </div>
-    </div>
+    </PageHeader>
   );
 };