Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Patient Search and Register UI #9400

Merged
merged 33 commits into from
Dec 24, 2024
Merged

Conversation

shivankacker
Copy link
Member

@shivankacker shivankacker commented Dec 12, 2024

Proposed Changes

@ohcnetwork/care-fe-code-reviewers

Merge Checklist

  • Add specs that demonstrate bug / test a new feature.
  • Update product documentation.
  • Ensure that UI text is kept in I18n files.
  • Prep screenshot or demo video for changelog entry, and attach it to issue.
  • Request for Peer Reviews
  • Completion of QA

Summary by CodeRabbit

  • New Features

    • Introduced a new SectionNavigator component for improved navigation within sections.
    • Added PatientIndex and PatientRegistration components for enhanced patient management and registration.
    • Implemented new search options and filters in the FacilityList and ManagePatients components.
  • Enhancements

    • Updated language strings for improved clarity and user experience.
    • Enhanced input components with error handling and label support.
  • Bug Fixes

    • Improved error handling in various components for better user feedback.
  • Chores

    • Updated dependency versions for improved stability and performance.

Copy link
Contributor

coderabbitai bot commented Dec 12, 2024

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This pull request introduces comprehensive updates across multiple components of a healthcare application. The changes span dependency version updates, internationalization improvements, UI component enhancements, and patient management functionalities. Key modifications include introducing new components like SectionNavigator, PatientIndex, and PatientRegistration, updating utility functions, refining search and filter mechanisms, and improving form validation and error handling across various UI elements.

Changes

File Change Summary
package.json Updated dependency versions for @radix-ui/react-checkbox, @radix-ui/react-radio-group, and i18next-browser-languagedetector
public/locale/en.json Added multiple new localization strings for patient registration, error messages, and UI guidance
src/components/Patient/* Introduced new components PatientIndex, PatientRegistration, updated Utils.ts, modified models.tsx
src/components/ui/* Enhanced input components (checkbox, input, radio-group, select, textarea) with label and error handling support
src/Routers/routes/PatientRoutes.tsx Updated routes to use new PatientIndex and PatientRegistration components

Suggested labels

P1

Suggested reviewers

  • rithviknishad
  • nihal467
  • Jacobjeevan

Poem

🐰 A Rabbit's Ode to Code Renewal 🐰

Packages bumped, components refined,
Patient flows now beautifully designed.
Checkboxes dance, inputs gleam bright,
Our codebase leaps with pure delight!

Hop, hop, hooray for clean UI! 🎉


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@shivankacker shivankacker changed the title search page New Patient Search and Register UI Dec 12, 2024
Copy link

cloudflare-workers-and-pages bot commented Dec 12, 2024

Deploying care-fe with  Cloudflare Pages  Cloudflare Pages

Latest commit: 4c03487
Status:⚡️  Build in progress...

View logs

@shivankacker shivankacker self-assigned this Dec 12, 2024
@github-actions github-actions bot added the merge conflict pull requests with merge conflict label Dec 13, 2024
Copy link

👋 Hi, @shivankacker,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.


This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.

@github-actions github-actions bot removed the merge conflict pull requests with merge conflict label Dec 14, 2024
@nihal467
Copy link
Member

nihal467 commented Dec 15, 2024

Bug Report

Major Functionality


image
image

  • When we create a patient with a 20-digit number, the system successfully redirects to the consultation page. However, when I check the respective patient details page, it reflects as 'undefined'.
  • A similar issue arises when we fill only the date in the DOB field and leave the month and year blank. Ensure that all the fields have proper validation.

image

  • No New Patient Registration is possible either with DOB or Age, in all scenario, the formatting issue is thrown and the registration fails

image

  • The entire insurance details section is missing from the patient registration form.

image

  • When a patient is registered with age instead of DOB, only display the age in the 'Search Patient' UI.
  • Rename the column name from DOB to Age/DOB

Minor Functionality


image

  • The Shift+P shortcut is not working on the Windows OS.
  • The representation of the key on the button doesn't look good at all. stick to the figma

image

  • Reset the search input field when the corresponding badge is manually closed.

image

  • The placeholder of the IP/OP number is clipping in.

image

  • Add a skeleton loader to the 'Search Patient' page while the data is being fetched based on the input.

image

  • Keep the DOB format as DD-MM-YYYY on the 'Search Patient' page.

image

  • Remove the "*" for Landmark and Ward as they are non-mandatory fields.
  • Add placeholders for all dropdowns as shown in our latest Figma design.

image

  • Rename 'Non-binary' to 'Transgender' in the sex field.

image

  • Keep the phone number hardcoded to have +91 in the field.
  • The phone number should only accept 10 digits.

image

  • Emergency contact person is missing field validation

image

  • The autofill is not working for the district because the field enabling is facing some delay.

image

  • The tab switching functionality does not properly use colors, making it difficult for users to identify the currently active tab on the initial load of the 'All Patients' page.

image

  • add spacing between the badges and the search field in the patient list page

Question needs clarification


image

  • Why are we mixing the IP/OP column with the name? Isn't it better to keep them separate?

image

  • Disabling ABDM and HCX on this deploy was intentional? We need to enable them for testing purposes.

image

  • The entire volunteer section and related items are missing from the registration form. Is this intentional?

  • The entire patient transfer workflow from the patient registration form seems to be missing. How do we plan to handle this?

@shivankacker
Copy link
Member Author

@nihal467 we are not including insurance and volunteer details right now.

  • Fixed the field validations
  • A lot of UI bugs in the minor issues you pointed out happened when i pulled form field branch. I let them be for now because I didn't want to break any functionality
  • Pushing the other minor changes in a while

@shivankacker
Copy link
Member Author

shivankacker commented Dec 15, 2024

Made all changes, except :

Add placeholders for all dropdowns as shown in our latest Figma design.

This will add a lot of translations to manage. The label of the field is sufficient enough i think

Rename 'Non-binary' to 'Transgender' in the sex field.

I let it be as what it already was (specified in translations)

The phone number should only accept 10 digits.

Will completely replace with a new phone number field after this PR.


Reset the search input field when the corresponding badge is manually closed.
The tab switching functionality does not properly use colors, making it difficult for users to identify the currently active tab on the initial load of the 'All Patients' page.

Will fix these later

@shivankacker shivankacker marked this pull request as ready for review December 15, 2024 14:32
@shivankacker shivankacker requested a review from a team as a code owner December 15, 2024 14:32
@github-actions github-actions bot added the merge conflict pull requests with merge conflict label Dec 16, 2024
Copy link

👋 Hi, @shivankacker,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.


This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.

@nihal467
Copy link
Member

nihal467 commented Dec 16, 2024

Fix the below Issue before requesting another review

  • Add a validation rule to ensure the phone number field accepts exactly 10 digits. Currently, patients can be created with a 9-digit number. Ensure proper error messages are displayed.
  • Add a mandatory validation for the age field in the patient registration form.
  • Unable to create a new patient / Edit a existing patient by mentioning patient age only
  • When a patient is created with a DOB, and we later visit the patient’s edit page, the DOB field is replaced by the calculated age based on the provided DOB. If we manually switch back to the DOB field, it appears blank.
  • the ration card details are not been stored while creating new patient or updating existing one
  • the occupation details are been stored but when we open the edit registration form page, the field is blank

Issue that can be taken in another PR

  • Add a translation for non-binary sex to transgender in patient registration form
  • Reset the patient search field when the related badge are been removed
  • Add a placeholders for all dropdown as per the figma file
  • The tab switching functionality does not properly use colors, making it difficult for users to identify the currently active tab on the initial load of the 'All Patients' page.
  • Restore Draft feature is missing in the new patient registration form
  • ABDM , HCX workflow
  • Entire Insurance Section

Question

image

  • When filling out the patient registration form, the patient transfer form pops up for matching phone number. Can't we consider implementing this workflow in the patient search instead? Since we are already searching for all patients with the same number, couldn't the workflow be incorporated there?

src/components/Common/SortDropdown.tsx Show resolved Hide resolved
src/components/Facility/FacilityHome.tsx Outdated Show resolved Hide resolved
src/components/Facility/FacilityList.tsx Outdated Show resolved Hide resolved
csv: true,
facility: qParams.facility,
};
delete qParams.is_active;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shivankacker Can you get this resolved? What exactly are you achieving with the delete here?

src/components/Patient/ManagePatients.tsx Show resolved Hide resolved
};

useEffect(() => {
const timeout = setTimeout(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another timeout?

const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const errors: Record<string, string[]> = {};
const requiredFields: Array<keyof typeof form> = [
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These should move to a patient.ts file where the PatientModel and the patientCreateValidator should exist

src/components/Patient/PatientRegistration.tsx Outdated Show resolved Hide resolved
};
}, [form.phone_number]);

const patientPhoneSearch = useQuery({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a better workflow would be to freeze the phoneNumber field in the PatientRegister Form, given that the user has already gone through the search and find phase.

Maybe file an issue

Copy link
Member Author

@shivankacker shivankacker Dec 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you suggesting to freeze the input field with a number if specified in query params?

flow will be : user searches for phone number xyz, finds no patients, clicks on create patient which takes the user to /patient-register?number=xyz with a frozen number field

  • What happens if the user had initially searched for the wrong phone number, and now wants to change it midway through filling the form?
  • It would still need a patient phone search for cases where patient is being created without searching for the number first, so functionality would not change.

@github-actions github-actions bot added the merge conflict pull requests with merge conflict label Dec 23, 2024
Copy link

👋 Hi, @shivankacker,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.


This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.

@bodhish
Copy link
Member

bodhish commented Dec 23, 2024

  • Ward number is missing
image
  • Details of patient page is breaking in facility
image
  • I don't think OP/Ip will search will work for the all patients API
image
  • The route choice is a bit odd, I would call it url/facility/id/register-patient instead of url/facility/id/patient/create

@shivankacker
Copy link
Member Author

@bodhish

  • OP/IP search was made to only work for exact searches. Should that be changed?
image
  • Do you mean /patient/create instead of register-patient?

@bodhish
Copy link
Member

bodhish commented Dec 24, 2024

  • okay lets keep
  • patient/create

@nihal467
Copy link
Member

nihal467 commented Dec 24, 2024

Bug Report

Minor

image

  • the nav bar in the patient tab is not properly responsive for mobile view

image

  • Reset the patient search field when the related badge are been removed

image

  • When you switch the search patient preference option in the field, the previously applied search still remains and does not reset the search field. Is this intentional behavior? Earlier, it wasn’t like this.

image

  • auto-scroll to the top-most error message field, to show the users, where exactly the error present
  • add a cancel button in the form to close it

image
image

  • The active border color of the current address field is not consistent with the other fields.

Enhancement

  • Add Support for Restore Draft form
  • Add support for ABDM, HCX

image

  • Freeze the sidebar navigation (General Info, Social Profile) when the user scrolls to the bottom of the page.

image

  • Add tooltip support to the local body field since it's clipping the data.

  • Add placeholder for dropdown : Blood Group , Pincode & Ration card Category

@nihal467
Copy link
Member

@shivankacker look into the above comment

CC: @bodhish

@shivankacker
Copy link
Member Author

@nihal467
Changes made except

Add Support for Restore Draft form

Covered in #9552

Add support for ABDM, HCX

Covered In #9553

Freeze the sidebar navigation (General Info, Social Profile) when the user scrolls to the bottom of the page.

Covered In #9552

Add placeholder for dropdown : Blood Group , Pincode & Ration card Category

Do we really need it? Specifying both a placeholder and label here will not make a lot of sense + it would mean more translations to manage

@github-actions github-actions bot removed the merge conflict pull requests with merge conflict label Dec 24, 2024
@bodhish bodhish merged commit 35e0725 into form-field-v1 Dec 24, 2024
2 of 4 checks passed
@bodhish bodhish deleted the patient-registration branch December 24, 2024 13:42
Copy link

@shivankacker Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌

@shivankacker
Copy link
Member Author

the-office-crying.gif

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

7 participants