(feat) O3-4198: Use shared page header component in bed management page header

[mccarthyaaron]

Requirements

• This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
• My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
• My work includes tests or is validated by existing tests.

Summary

This PR introduces the shared PageHeader component to be used in the page header of the bed management app, replacing the custom header which was being used before

Screenshots

Related Issue

https://openmrs.atlassian.net/browse/O3-4198

[dilankavishka]

@denniskigen @mccarthyaaron In the header name should be changed Summary to Bed Management right?

[mccarthyaaron]

@denniskigen @mccarthyaaron In the header name should be changed Summary to Bed Management right?

@dilankavishka I don't think so. "Summary" shows that we are on the summary page just like "Ward allocation", "Bed type" and "Bed tag". Prior to this PR, "Bed Management" was shown above "Summary" but the PageHeader component uses the implementation name from the configuration (defaulting to "Clinic") in that position where "Bed Management" was. So for now we can't show "Bed Management" where it initially was without first changing the implementation of the PageHeader component. And we can't place it where "Summary" is because that spot is for showing which page the user is currently on. This issue would require further guidance for the right solution

[denniskigen]

@dilankavishka is right. @mccarthyaaron we'd need to tweak a few things to make this possible:

• Remove the route property from HeaderProps. We can use headerTitle only (or even the more concise title)

• Refactor all occurrences of route as a prop of <Header>, replacing them with title. So, <Header title={t('bedManagement', 'Bed management')} instead of <Header route="Bed management">

• Renaming the landing page title to Bed management:

   <section className={styles.section}>
     <Header title={t('bedManagement', 'Bed management')} />
     <BedManagementSummary />
   </section>

• Adding translation strings for the left panel links in index.ts as comment strings:

   export const summaryLeftPanelLink = getSyncLifecycle(
     // t('summary', 'Summary')
     createLeftPanelLink({
       name: 'bed-management',
       title: 'Summary',
     }),
     options,
   );

[mccarthyaaron]

@denniskigen I have pushed some changes. Could kindly take a look