Patient header UI update in Patient details page #9377
Conversation
WalkthroughThe changes involve updates to the English localization file Changes
Assessment against linked issues
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. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
src/components/Patient/PatientHome.tsx (1)
279-309: Consider memoizing the skills formatting logicThe skills formatting and tooltip rendering logic could benefit from memoization to prevent unnecessary re-renders, especially for large skill sets.
+ const formattedSkills = useMemo(() => formatSkills(skillsQuery.data?.results), + [skillsQuery.data?.results]); - {!!skillsQuery.data?.results?.length && - formatSkills(skillsQuery.data?.results)} + {!!skillsQuery.data?.results?.length && formattedSkills}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
public/locale/en.json(1 hunks)src/components/Patient/PatientDetailsTab/Demography.tsx(1 hunks)src/components/Patient/PatientHome.tsx(1 hunks)
🔇 Additional comments (4)
src/components/Patient/PatientDetailsTab/Demography.tsx (1)
229-229: LGTM: Safe state value access implementation
The change to use state_object?.name with optional chaining is a safer way to access the state value and fixes the incorrect state value issue mentioned in the PR objectives.
src/components/Patient/PatientHome.tsx (2)
268-269: LGTM: Clean layout structure
The flex layout with proper gap spacing provides a responsive and well-organized structure for the patient header.
350-432: LGTM: Comprehensive status indicators
The status chips section effectively displays all relevant patient statuses with appropriate visual indicators and conditions.
public/locale/en.json (1)
1119-1119: LGTM: Improved text clarity
The text change from "Patient Details" to "Details of Patient" provides better clarity in the UI.
Mahendar0701
changed the title
|
👋 Hi, @Mahendar0701, This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there. |
Jacobjeevan
added
changes required
and removed
needs testing
needs review
merge conflict
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
src/components/ui/badge.tsx (1)
37-59: Consider adding aria-label for icon-only scenarios.The implementation looks good! For better accessibility, consider adding aria-label when the badge contains only icons without text.
- {startIcon && <CareIcon icon={startIcon} className="mr-1" />} + {startIcon && <CareIcon icon={startIcon} className="mr-1" aria-label={startIcon} />} <span>{props.children}</span> - {endIcon && <CareIcon icon={endIcon} className="ml-1" />} + {endIcon && <CareIcon icon={endIcon} className="ml-1" aria-label={endIcon} />}src/components/Patient/PatientHome.tsx (1)
568-577: Consider consolidating transfer status logic.The transfer status badge could be simplified using a single conditional render.
- {patientData.allow_transfer ? ( - <Badge variant="success" startIcon="l-unlock"> - {t("transfer_allowed")} - </Badge> - ) : ( - <Badge variant="warning" startIcon="l-lock"> - {t("transfer_blocked")} - </Badge> - )} + <Badge + variant={patientData.allow_transfer ? "success" : "warning"} + startIcon={patientData.allow_transfer ? "l-unlock" : "l-lock"} + > + {t(patientData.allow_transfer ? "transfer_allowed" : "transfer_blocked")} + </Badge>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/Patient/PatientHome.tsx(5 hunks)src/components/ui/badge.tsx(3 hunks)
🔇 Additional comments (3)
src/components/ui/badge.tsx (1)
19-26: LGTM! Well-structured variant definitions.
The new variants (alert, danger, success) are properly defined with appropriate color schemes and hover states.
src/components/Patient/PatientHome.tsx (2)
291-434: LGTM! Well-structured patient header layout.
The new layout effectively organizes patient information with clear sections for:
- Facility details
- Treating doctor with skills tooltip
- Assigned doctor with WhatsApp integration
- Assigned volunteer
- Status badges with appropriate visual indicators
347-355:
Security: Enhance WhatsApp link sanitization.
The current phone number sanitization can be improved for better security.
This was previously flagged in an earlier review. Please implement the suggested phone number sanitization function.
Proposed Changes
Fixes Update Patient Header and state value in Patient details page #9376
Updated patient Header
Updated state value in demography tab
Updated tranfer labels to relevant colours
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes
Documentation