Rewamp UX for symptoms and diagnosis in EncounterQuestionnaire #9644
Conversation
…improved layout and functionality; enhance SymptomQuestion with new dropdown menu and symptom management features.
…with a new UI structure, including dropdown menus for clinical status and verification, and improved handling of diagnosis items. Introduce a new DiagnosisItem component for better code organization and maintainability. Update SymptomQuestion to improve symptom display with truncation for long text.
WalkthroughThis pull request focuses on refactoring and improving several questionnaire-related components in the patient management system. The changes primarily involve restructuring the layout, enhancing type safety, and introducing more modular component designs across Changes
Sequence DiagramsequenceDiagram
participant User
participant QuestionnaireForm
participant DiagnosisQuestion
participant SymptomQuestion
User->>QuestionnaireForm: Starts Questionnaire
QuestionnaireForm->>DiagnosisQuestion: Render Diagnosis Component
DiagnosisQuestion->>User: Display Diagnosis Entry
User->>DiagnosisQuestion: Add/Edit Diagnosis
QuestionnaireForm->>SymptomQuestion: Render Symptom Component
SymptomQuestion->>User: Display Symptom Entry
User->>SymptomQuestion: Add/Edit Symptoms
QuestionnaireForm->>User: Submit Questionnaire
Possibly related PRs
Suggested Labels
Suggested Reviewers
Poem
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
Deploying care-fe with
|
| Latest commit: |
7893cd5
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://dec6d9ec.care-fe.pages.dev |
| Branch Preview URL: | https://rewamp-symptom.care-fe.pages.dev |
CARE
|
||||||||||||||||||||||||||||
| Project |
CARE
|
| Branch Review |
rewamp-symptom
|
| Run status |
|
| Run duration | 01m 07s |
| Commit |
|
| Committer | Bodhish Thomas |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
3
|
| View all changes introduced in this branch ↗︎ | |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (7)
src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx (4)
47-53: Potential date/time zone issue inSYMPTOM_INITIAL_VALUE
Usingnew Date().toISOString().split("T")[0]might cause unexpected results if the client’s local time differs materially from UTC. Consider verifying if this is acceptable or if you need a local date handling strategy.
61-72:handleAddSymptomlogic is sound, consider preventing duplicates
Everything is straightforward. For a future enhancement, you could check if the symptom already exists before adding, to avoid duplicates.
99-126: Symptom listing and ValueSetSelect usage
The layout is clear and uses conditional rendering for the symptom list. You might consider rendering a placeholder message or label if there are no symptoms.
131-295:SymptomItemcomponent design
The component is well-structured, allowing updates via props. A few suggestions you could consider in the future:
- Provide user feedback when toggling notes (e.g., a short transition).
- For date changes, confirm appropriate time zone logic.
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx (2)
44-49:DIAGNOSIS_INITIAL_VALUEtime zone caution
Similar to symptoms, ensure that splitting and converting to ISO date aligns with the user’s local date/time expectations.
130-299:DiagnosisItemcomponent structure
Mirrors theSymptomItemdesign nicely. Possible future improvement: unify the repeated pattern for note-taking and toggling in a shared hook or common utility for both symptom and diagnosis items if they are largely the same.src/components/Questionnaire/QuestionnaireForm.tsx (1)
303-373: Refactoring for questionnaire forms
Encapsulating each form in aborder rounded-lg p-6container improves UI clarity. The extraction of form title and description is consistent and readable.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/Patient/EncounterQuestionnaire.tsx(1 hunks)src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx(2 hunks)src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx(2 hunks)src/components/Questionnaire/QuestionnaireForm.tsx(1 hunks)
🔇 Additional comments (12)
src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx (4)
1-2: "use client" directive is correctly placed
Ensures that this file is recognized as a client component.
3-7: Imports for icons
Radix Icons are properly imported; no issues found.
74-81: Symptom removal logic
Implementation is correct and cleanly filters out the targeted index.
83-89: Symptom update logic
Method correctly merges existing symptom data with partial updates. No issues found.src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx (4)
1-5: Icon imports
Appropriate usage of Radix Icons; looks good.
10-15: Dropdown menu adoption
Replaces older command menu usage. The approach is consistent with UI design changes in this PR.
60-88: Diagnosis CRUD operations
The logic for adding, removing, and updating diagnoses is consistent. Make sure to handle duplicates if the system requires it, similarly to symptoms.
98-119: Diagnosis listing block
The UI’s conditional rendering is clean. The new grid layout improves readability.src/components/Patient/EncounterQuestionnaire.tsx (1)
28-47: Layout simplification usingCard
Removing the extra wrapping<div>streamlines the layout, making the code more direct. Looks clean and aligned with standard usage ofCardandCardContent.src/components/Questionnaire/QuestionnaireForm.tsx (3)
300-302: Enhanced spacing in the main container
Usingmax-w-3xlandpb-8 space-y-2provides a better user experience with clear separation between elements.
377-399: Questionnaire add/search block
The usage of<QuestionnaireSearch>is neatly placed at the bottom. The logic for preventing duplicate questionnaires is well-handled.
403-432: Submit & Cancel buttons alignment
The button styling is clear. The spinner overlay approach (showing a hidden label with an overlaid spinner) is an elegant pattern for asynchronous submission feedback.
|
@bodhish 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! 🙌 |
This pull request includes significant updates to the
EncounterQuestionnaire,DiagnosisQuestion, andSymptomQuestioncomponents to improve the user interface and functionality. The primary changes involve refactoring the components to use new UI elements and simplifying state management.Changes to
EncounterQuestionnaire:divand adjusting the padding and margin of theCardcomponent. (src/components/Patient/EncounterQuestionnaire.tsx) [1] [2]Changes to
DiagnosisQuestion:Commandcomponent withDropdownMenufor selecting diagnoses, and introduced a newValueSetSelectcomponent for searching and adding diagnoses. (src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx)DiagnosisItemcomponent to handle individual diagnosis entries. (src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx)Changes to
SymptomQuestion:DiagnosisQuestion, replaced theCommandcomponent withDropdownMenuand introducedValueSetSelectfor adding symptoms. (src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx)src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx)@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
Bug Fixes
Style