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

https://github.com/coronasafe/care_fe/issues/7316#issuecomment-1981128727

[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?

[Shahbaz898414]

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

[SinghYuvraj0506]

I have made all the possibilities of the header in the design

Hey @rithviknishad @sainak @nihal467 look into the design and if it is correct , then I would to like to work on the issue, could you please assign it to me

[github-actions[bot]]

Hi, @gigincg, @nihal467, @khavinshankar, @mathew-alex, @aparnacoronasafe, This issue has been automatically marked as stale because it has not had any recent activity.