feat(patient): add blood_group to registration form and display in profile
Overview
This MR adds support for capturing and displaying the blood_group field in the patient module. It ensures that the selected blood group during registration is sent to the backend and properly displayed in the patient profile.
What does this MR do and why?
Previously, although the UI allowed selecting a blood group, the value was not being sent in the API request, resulting in null values in the backend and missing information in the profile.
This MR fixes the issue by:
- Adding proper state handling for blood_group
- Including blood_group in API payload
- Displaying blood_group in patient profile
This improves data consistency and enhances patient record completeness.
Changes Made
- Added blood_group dropdown in patient registration form
- Updated form state to include blood_group
- Updated handleChange function to manage blood_group
- Included blood_group in API request payload
- Displayed blood_group in patient profile page
Technical Details
-
Root cause: blood_group was not included in API request payload
-
Fix:
- Added field to form state
- Bound dropdown to state
- Passed value in API request
-
Data flow: UI → form state → API request → backend → response → profile UI
Type of Change
-
🐛 Bug fix -
✨ New feature -
💥 Breaking change -
📝 Documentation update -
🎨 UI/UX improvement -
♻ ️ Refactor -
⚡ Performance improvement -
🧪 Test update -
🔧 Configuration change -
🚨 Security fix
Related Issues / References
Closes #314 (closed)
Screenshots or Screen Recordings
Before
Blood group not saved/displayed
After
Blood group selected and visible in profile
How to Set Up and Validate Locally
- Pull this branch
- Install dependencies:
bun install
3. Run frontend:
bun dev- Perform actions:
- Go to patient registration page
- Select blood group
- Submit form
- Navigate to patient profile
- Expected behavior:
- Selected blood group is saved
- Blood group is displayed in profile
Testing Done
-
Manual testing completed -
Unit tests added/updated
Test Cases Covered:
| Scenario | Expected Result | Status |
|---|---|---|
| Select blood group | Value stored in form state | |
| Submit form | Value sent to backend | |
| View profile | Blood group displayed |
Code Quality Checklist
Code Standards
-
Code follows project conventions -
No unused variables -
No debug statements left -
Proper TypeScript types used -
ESLint checks pass
React Best Practices
-
Proper state management used -
No unnecessary re-renders -
Hooks used correctly
Component Patterns
-
UI consistent with existing components -
Responsive design maintained -
Accessibility considered
API & Data Fetching
-
API payload updated correctly -
Backend integration verified
Error Handling
-
Errors handled gracefully
Documentation
-
README updated -
CHANGELOG.md to be updated
Known Limitations / Technical Debt
- No validation for blood group values (can be improved with dropdown constraints)
Additional Notes
- This change depends on backend support for blood_group
- Backward compatible with existing patients
MR Acceptance Checklist
-
Feature works as expected -
No existing functionality broken -
UI displays correct data
Closes #314 (closed)