diff --git a/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.component.tsx b/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.component.tsx index 6fb0fed9c..11e6f44eb 100644 --- a/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.component.tsx +++ b/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.component.tsx @@ -249,7 +249,7 @@ const BedAdministrationForm: React.FC = ({ defaultValue={selectedBedType} id="bedType" invalidText={t('required', 'Required')} - labelText={t('bedType', 'Bed type')} + labelText={t('bedTypes', 'Bed types')} {...field}> {availableBedTypes.map((bedType, index) => ( diff --git a/packages/esm-bed-management-app/src/bed-administration/bed-administration-table.component.tsx b/packages/esm-bed-management-app/src/bed-administration/bed-administration-table.component.tsx index 1cb7fd1c5..b8cf88253 100644 --- a/packages/esm-bed-management-app/src/bed-administration/bed-administration-table.component.tsx +++ b/packages/esm-bed-management-app/src/bed-administration/bed-administration-table.component.tsx @@ -29,7 +29,7 @@ import styles from './bed-administration-table.scss'; const BedAdministrationTable: React.FC = () => { const { t } = useTranslation(); - const headerTitle = t('wardAllocation', 'Ward Allocation'); + const headerTitle = t('wardAllocation', 'Ward allocation'); const layout = useLayoutType(); const isTablet = layout === 'tablet'; const responsiveSize = isTablet ? 'lg' : 'sm'; @@ -131,7 +131,7 @@ const BedAdministrationTable: React.FC = () => { if (isLoadingBedsGroupedByLocation && !bedsGroupedByLocation.length) { return ( <> -
+
@@ -142,7 +142,7 @@ const BedAdministrationTable: React.FC = () => { if (errorFetchingBedsGroupedByLocation) { return ( <> -
+
@@ -152,7 +152,7 @@ const BedAdministrationTable: React.FC = () => { return ( <> -
+
{results?.length ? (
diff --git a/packages/esm-bed-management-app/src/bed-tag/bed-tag-administration-table.component.tsx b/packages/esm-bed-management-app/src/bed-tag/bed-tag-administration-table.component.tsx index 4720d04e6..5b7943787 100644 --- a/packages/esm-bed-management-app/src/bed-tag/bed-tag-administration-table.component.tsx +++ b/packages/esm-bed-management-app/src/bed-tag/bed-tag-administration-table.component.tsx @@ -27,7 +27,7 @@ import styles from '../bed-administration/bed-administration-table.scss'; const BedTagAdministrationTable: React.FC = () => { const { t } = useTranslation(); - const headerTitle = t('bedTag', 'Bed tag'); + const headerTitle = t('bedTags', 'Bed tags'); const layout = useLayoutType(); const isTablet = layout === 'tablet'; const responsiveSize = isTablet ? 'lg' : 'sm'; @@ -43,7 +43,7 @@ const BedTagAdministrationTable: React.FC = () => { const tableHeaders = [ { - header: t('ids', 'Id'), + header: t('ids', 'ID'), key: 'ids', }, { @@ -85,7 +85,7 @@ const BedTagAdministrationTable: React.FC = () => { if (isBedDataLoading || isLoadingBedTags) { return ( <> -
+
@@ -96,7 +96,7 @@ const BedTagAdministrationTable: React.FC = () => { if (errorLoadingBedTags) { return ( <> -
+
@@ -106,7 +106,7 @@ const BedTagAdministrationTable: React.FC = () => { return ( <> -
+
{showBedTagsModal ? ( diff --git a/packages/esm-bed-management-app/src/bed-tag/bed-tags-admin-form.component.tsx b/packages/esm-bed-management-app/src/bed-tag/bed-tags-admin-form.component.tsx index 200a7ef76..3e9cbd94e 100644 --- a/packages/esm-bed-management-app/src/bed-tag/bed-tags-admin-form.component.tsx +++ b/packages/esm-bed-management-app/src/bed-tag/bed-tags-admin-form.component.tsx @@ -88,7 +88,7 @@ const BedTagsAdministrationForm: 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'; @@ -91,7 +91,7 @@ const BedTypeAdministrationTable: React.FC = () => { if (isLoadingBedTypes) { return ( <> -
+
@@ -102,7 +102,7 @@ const BedTypeAdministrationTable: React.FC = () => { if (errorLoadingBedTypes) { return ( <> -
+
@@ -112,7 +112,7 @@ const BedTypeAdministrationTable: React.FC = () => { return ( <> -
+
{showBedTypeModal ? ( diff --git a/packages/esm-bed-management-app/src/header/header.component.tsx b/packages/esm-bed-management-app/src/header/header.component.tsx index 1f0ba249f..c3032bcd5 100644 --- a/packages/esm-bed-management-app/src/header/header.component.tsx +++ b/packages/esm-bed-management-app/src/header/header.component.tsx @@ -1,31 +1,36 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { Calendar, Location } from '@carbon/react/icons'; -import { ConfigurableLink, formatDate, useSession } from '@openmrs/esm-framework'; -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 = ({ route, headerTitle }) => { +const Header: React.FC = ({ title }) => { const { t } = useTranslation(); const userSession = useSession(); const userLocation = userSession?.sessionLocation?.display; return ( -
-
- - - -
-

{t(headerTitle ?? 'bedManagement', headerTitle ?? 'Bed management')}

-

{route}

-
-
+ + + + + } + title={title} + className={styles.leftJustifiedItems} + />
@@ -35,7 +40,7 @@ const Header: React.FC = ({ route, headerTitle }) => { {formatDate(new Date(), { mode: 'standard' })}
-
+ ); }; diff --git a/packages/esm-bed-management-app/src/header/header.scss b/packages/esm-bed-management-app/src/header/header.scss index a06b94ffc..11b4c4cb2 100644 --- a/packages/esm-bed-management-app/src/header/header.scss +++ b/packages/esm-bed-management-app/src/header/header.scss @@ -18,6 +18,21 @@ flex-direction: row; align-items: center; cursor: pointer; + + & > div:nth-child(2) { + margin: layout.$spacing-05; + + & > p:last-child { + white-space: nowrap; + @include type.type-style('heading-04'); + } + } +} + +.inPatientPictogram { + width: 4.5rem; + height: 4.5rem; + fill: var(--brand-03); } .rightJustifiedItems { @@ -27,19 +42,6 @@ padding-top: layout.$spacing-04; } -.pageName { - white-space: nowrap; - @include type.type-style('heading-04'); -} - -.pageLabels { - margin: layout.$spacing-05; -} - -.middot { - margin: 0 layout.$spacing-03; -} - .dateAndLocation { display: flex; justify-content: flex-end; @@ -54,19 +56,3 @@ .middot { margin: 0 layout.$spacing-03; } - -.view { - @include type.type-style('label-01'); -} - -svg.iconOverrides { - width: 4.5rem !important; - height: 4.5rem !important; - fill: var(--brand-03); -} - -.svgContainer svg { - width: 4.5rem; - height: 4.5rem; - fill: var(--brand-03); -} diff --git a/packages/esm-bed-management-app/src/header/illustration.component.tsx b/packages/esm-bed-management-app/src/header/illustration.component.tsx deleted file mode 100644 index 210ae6a59..000000000 --- a/packages/esm-bed-management-app/src/header/illustration.component.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { Stethoscope } from '@carbon/react/icons'; -import styles from './header.scss'; - -const Illustration: React.FC = () => { - return ( -
- -
- ); -}; - -export default Illustration; diff --git a/packages/esm-bed-management-app/src/home.component.tsx b/packages/esm-bed-management-app/src/home.component.tsx index 0d8e79a19..f2f761223 100644 --- a/packages/esm-bed-management-app/src/home.component.tsx +++ b/packages/esm-bed-management-app/src/home.component.tsx @@ -1,12 +1,15 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; import BedManagementSummary from './summary/summary.component'; import Header from './header/header.component'; import styles from './home.scss'; const Home: React.FC = () => { + const { t } = useTranslation(); + return (
-
+
); diff --git a/packages/esm-bed-management-app/src/index.ts b/packages/esm-bed-management-app/src/index.ts index a42726af6..36c0226fa 100644 --- a/packages/esm-bed-management-app/src/index.ts +++ b/packages/esm-bed-management-app/src/index.ts @@ -22,6 +22,7 @@ export const adminCardLink = getAsyncLifecycle(() => import('./admin-card-link.c export const summaryLeftPanelLink = getSyncLifecycle( createLeftPanelLink({ name: 'bed-management', + // t('summary', 'Summary') title: 'Summary', }), options, @@ -29,24 +30,27 @@ export const summaryLeftPanelLink = getSyncLifecycle( export const adminLeftPanelLink = getSyncLifecycle( createLeftPanelLink({ - name: 'administration', - title: 'Ward Allocation', + name: 'bed-administration', + // t('wardAllocation', 'Ward allocation') + title: 'Ward allocation', }), options, ); export const bedTypeLeftPanelLink = getSyncLifecycle( createLeftPanelLink({ - name: 'bed-type', - title: 'Bed Type', + name: 'bed-types', + // t('bedTypes', 'Bed types') + title: 'Bed types', }), options, ); export const bedTagLeftPanelLink = getSyncLifecycle( createLeftPanelLink({ - name: 'bed-tag', - title: 'Bed Tag', + name: 'bed-tags', + // t('bedTags', 'Bed tags') + title: 'Bed tags', }), options, ); diff --git a/packages/esm-bed-management-app/src/root.component.tsx b/packages/esm-bed-management-app/src/root.component.tsx index 993eeb2ea..f1d04fa16 100644 --- a/packages/esm-bed-management-app/src/root.component.tsx +++ b/packages/esm-bed-management-app/src/root.component.tsx @@ -28,9 +28,9 @@ const Root: React.FC = () => { } /> } /> - } /> - } /> - } /> + } /> + } /> + } /> diff --git a/packages/esm-bed-management-app/src/ward-with-beds/ward-with-beds.component.tsx b/packages/esm-bed-management-app/src/ward-with-beds/ward-with-beds.component.tsx index 10bb2b380..6219cf862 100644 --- a/packages/esm-bed-management-app/src/ward-with-beds/ward-with-beds.component.tsx +++ b/packages/esm-bed-management-app/src/ward-with-beds/ward-with-beds.component.tsx @@ -93,7 +93,7 @@ const WardWithBeds: React.FC = () => { return ( <> -
+
{isLoadingBeds && (
diff --git a/packages/esm-bed-management-app/translations/en.json b/packages/esm-bed-management-app/translations/en.json index ac668f7d9..d19a3e425 100644 --- a/packages/esm-bed-management-app/translations/en.json +++ b/packages/esm-bed-management-app/translations/en.json @@ -12,16 +12,16 @@ "bedName": "Bed name", "bedNumber": "Bed number", "beds": "Beds", - "bedTag": "Bed tag", "bedTagCreated": "Bed tag created", "bedTagCreatedSuccessfully": "", "bedTagPlaceholder": "", + "bedTags": "Bed tags", "bedTagUpdated": "Bed tag updated", "bedTagUpdatedSuccessfully": "", - "bedType": "Bed type", "bedTypeCreated": "Bed type created", "bedTypeCreatedSuccessfully": "", "bedTypePlaceholder": "", + "bedTypes": "Bed types", "bedTypeUpdated": "Bed type updated", "bedTypeUpdatedSuccessfully": "", "bedUpdated": "Bed updated", @@ -60,7 +60,8 @@ "required": "Required", "save": "Save", "selectBedLocation": "Select a bed location", + "summary": "Summary", "viewBeds": "View beds", - "wardAllocation": "Ward Allocation", + "wardAllocation": "Ward allocation", "yes": "Yes" }