Redesign the header to be consistent across all pages

[sainak]

Currently the header is very inconsistent and space consuming on the screen so, to fix that make the header a reusable component

current headers across pages

very rough sketch:

cc: @aparnacoronasafe

[saloni0419]

@sainak @rithviknishad can you please assign this issue to me

[sainak]

@saloni0419 wait for a thumbs up from @aparnacoronasafe

[saloni0419]

Sure

[ab1123]

I would like to work on this issue. I will focus on making the header a separate component. In order to make the header reusable I would like to use the concept of barrel export with the header component. If you kindly allow me to work on this issue @sainak @aparnacoronasafe @rithviknishad

[SinghYuvraj0506]

Hi, @sainak can I work on the issue, I would create a new general header component that would fit most of the types shown, for any extra case we can create a separate functional component in the same component file

[ab1123]

@sainak @aparnacoronasafe any updates on this issue??

[kumar11jr]

Hii @sainak can i work on this issue.

[UdaySagar-Git]

I would like to work on this , can you please assign me

[aparnacoronasafe]

Please go ahead.

However, the suggested design is missing some elements. like the "Live / Discharge" tabs.

Please be mindful of retaining all the elements in the headers

[sainak]

@saloni0419 @ab1123 @SinghYuvraj0506 @kumar11jr @UdaySagar-Git
Post your mockups and implementation plan before working on this issue

cc: @Ashesh3 @rithviknishad @nihal467

[Shahbaz898414]

Hii @sainak can i work on this issue.

[bishwas-10]

hi @sainak can i work on this issue?
my implementation plan will be :

-i will make a reusable component named Header in a Common/components/ directory named Header.js file
-and another component named HeaderCountBlock in CAREUI/display/Count.js directory for no of counts of each sections like results sample like this

-for the header section each component like searchbox , advanced filter , switch tabs will be sent as a props and will render

and the final result may look like this



will be changed according to your suggestions!!

[yashdargude]

Hii @sainak , I would like to work on this , can you please assign me

[rithviknishad]

hi @sainak can i work on this issue? my implementation plan will be :

-i will make a reusable component named Header in a Common/components/ directory named Header.js file -and another component named HeaderCountBlock in CAREUI/display/Count.js directory for no of counts of each sections like results sample like this -for the header section each component like searchbox , advanced filter , switch tabs will be sent as a props and will render

and the final result may look like this will be changed according to your suggestions!!

@bishwas-10 this still does not look consistent at all across all pages.

The objective is to have consistent placement of common elements like filter buttons should be present in the same location on every page. Same with Import/Export, Add (Patient | Asset | ...), etc.

[bishwas-10]

@rithviknishad ok i will work on that as i mentioned above will be changed according to your suggestion.
And it will be easy for me to work on this if you guys assign me this issue

[rithviknishad]

@rithviknishad ok i will work on that as i mentioned above will be changed according to your suggestion. And it will be easy for me to work on this if you guys assign me this issue

#7316 (comment)

[SinghYuvraj0506]

@sainak @rithviknishad , i have built a mockup considering all the above conditions

From the above images of headers we currently have, I found some points :-

1. There are some fields which are common on every header like export/import , filters , a search field, section name, counts
2. Some CTA are present on some headers, these are different for different sections .
3. Some pages contain some switches for parsing different data.
4. Some pages contain more than one search fields.

The mockup solves all these problems,:

1. The fixed fields are kept constant at one corner.
2. These CTA can be added according to our needs and are optional, can handle more buttons too in a grid system
3. We can fix a switch on the topmost side of the header which is optional
4. I have provided a dropdown in the search field, where one can select the search prop to be searched and add more such search fields.

in technical aspect
Let's create a header component capable of all these features, it would have props that would control all these features like:

cc: @nihal467 @Ashesh3

[rithviknishad]

@SinghYuvraj0506 This looks great and example code seems to be very reusable and would lead to a consistent design pattern.

Just letting you know that, we generally refrain from "Icon Only" designs. It'd be great if labels are also present along with the icons so any users who may not be able to interpret icons would also find it easy to use.

[SinghYuvraj0506]

@rithviknishad i would use labels instead of icons, or we could even use the tip to tell about the tool over hovering it.
Also we need a responsive mobile UI , I think it would be best if we could align all the features of top row of the design I provided into hamburger menu and rest could be adjusted

[rithviknishad]

But we already have a hamburger menu for mobile. Did you mean to have two hamburger menus?

[ishaanxgupta]

Hi @sainak, I would like to work on this issue, please assign.
Thanks

[manmeetnagii]

@rithviknishad I noticed the issue about enhancing all the headers across the pages. I’d like to take up this task.

In my recent PR #9392 , I worked on enhancing the header of the Asset page, which gave me a deeper understanding of the codebase and the header structure. For this task, I will:

• Create a reusable header component using ShadCN UI button and SearchByMultipleFields.

I would like to work on this issue.

[manmeetnagii]

@Jacobjeevan can I create an issue for enhancing the Shifting Page Header Layout to align it with the Facilities and Patient header layouts. Also, I will ensure to use shadcn UI components.

[Jacobjeevan]

@Jacobjeevan can I create an issue for enhancing the Shifting Page Header Layout to align it with the Facilities and Patient header layouts. Also, I will ensure to use shadcn UI components.

No need to create a new issue; I can assign this one to you 👍

[manmeetnagii]

@Jacobjeevan sure, thank you

[manmeetnagii]

@Jacobjeevan please check this.What we can add in resources count 🤔

Desktop View

Mobile View

[rithviknishad]

before you work on this, do checkout:

• Add base for fhir forms #9262
• New Patient Search and Register UI #9400
• Add Facility switcher #9439

things have changed quite a bit over there.

[manmeetnagii]

Do I have to make changes according to these PRs' codebase? or wait to merge these

[rithviknishad]

i'd recommend hold this for now, and take this up if necessary after #9262 is merged.

[jeevjacobgeorge]

let me help

[manmeetnagii]

i'd recommend hold this for now, and take this up if necessary after #9262 is merged.

@rithviknishad Okay , I will wait for the merge. However, I have gone through these PRs and set up the form-field-v1 branch locally.

[nihal467]

most of the pages are designed already, closing this issue