Skip to content

feat: add date_of_birth field to patient registration and profiles

Suma Pullaiahgari requested to merge ehrs-dob into develop

Overview

This MR adds date_of_birth (DOB) field support to the patient registration system, user profiles, and related components. It introduces a reusable DOBField component with age calculation, validation, and multi-language support.

What does this MR do and why?

The patient registration system lacked a date_of_birth field, which is essential for medical records. This MR addresses the following needs:

  • Patient Registration: Add DOB field to capture patient date of birth
  • Age Calculation: Automatically calculate and display patient age based on DOB
  • Validation: Ensure DOB is valid (not in future, not excessively old)
  • Multi-language Support: Provide translations for English, Hindi, and Telugu
  • Accessibility: Support keyboard navigation and screen readers

Changes Made

New Files Added

  • src/components/DOBField.tsx - Reusable DOB input component with age display
  • tests/unit/components/DOBField.test.tsx - Unit tests for DOBField component

Modified Files

  • src/components/PersonalInformation.tsx - Added DOB field support
  • src/pages/volunteer/PatientRegistrationPage.tsx - Integrated DOB field
  • src/pages/profile/ProfilePage.tsx - Added DOB display in user profile
  • src/pages/volunteer/PatientHistoryPage.tsx - Added DOB to patient history
  • src/types/api.ts - Added date_of_birth to API types
  • src/lib/utils.ts - Added age calculation utility function
  • src/locales/en/translations.json - English translations for DOB
  • src/locales/hi/translations.json - Hindi translations for DOB
  • src/locales/te/translations.json - Telugu translations for DOB

Test Coverage Updated

  • tests/api.test.ts/createPatient.test.ts - Updated API tests for DOB
  • tests/unit/components/PatientRegistrationPage.test.tsx - Updated page tests

Type of Change

  • ✨ New feature (non-breaking change that adds functionality)
  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • 💥 Breaking change (fix or feature that would cause existing functionality to change)
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

  • Related to: Patient registration feature
  • Closes: Feature request for DOB field

Screenshots or Screen Recordings

before image image after image image image

How to Set Up and Validate Locally

  1. Pull this branch / checkout the MR branch
  2. Install dependencies: 
    bun install
  3. Update environment variables (if needed): 
    # .env
VITE_SERVER_URL=http://localhost:8000
  4. Run development server: 
    bun dev
  5. Navigate to specific pages or perform actions:
    • Visit http://localhost:5173/volunteer/patient-registration
    • Fill in the patient registration form
    • Select a date in the DOB field
    • Verify age is automatically calculated and displayed
    • Visit http://localhost:5173/profile
    • Verify DOB is displayed in the profile
  6. Expected behavior:
    • DOB field accepts valid dates (not future, not before 1900)
    • Age is calculated automatically when DOB is selected
    • Error message shown for invalid dates
    • Translations work correctly for all supported languages

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Enter valid DOB Age calculated and displayed ✅
Enter future date Error message shown ✅
Enter date before 1900 Error message shown ✅
Clear DOB field Age display cleared ✅
Tab navigation Proper focus management ✅
Screen reader support ARIA labels present ✅
Language switch Translations updated ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions (naming, structure, formatting)
  • No console.log() or debugger statements left in code
  • No unused imports, variables, or functions
  • No duplicate code and use of existing components for reusability
  • i18n check passed with no hardcoded strings in codebase for i18n support
  • TypeScript types are properly defined (no any unless justified)
  • ESLint and Prettier checks pass 
    bun run lint

React Best Practices

  • Components are properly split and single-responsibility
  • Hooks follow rules (no conditional hooks, proper dependencies)
  • State management is appropriate (local vs global state)
  • No unnecessary re-renders (memoization used where needed)
  • Event handlers are properly cleaned up

Component Patterns

  • shadcn/ui components used correctly
  • Tailwind classes follow utility-first approach
  • Responsive design considered (mobile-first if applicable)
  • Accessibility attributes included (aria-*, role, etc.)
  • Icons from lucide-react used consistently

API & Data Fetching

  • TanStack Query used for server state (if applicable)
  • Loading and error states handled
  • API types defined in src/types/api.ts
  • Axios interceptors handle auth tokens correctly
  • Use of Zod for data validations

Error Handling

  • Errors are caught and handled gracefully
  • User-friendly error messages displayed
  • Errors are being toasted properly
  • Network failures handled appropriately

Documentation

  • CHANGELOG.md updated

Known Limitations / Technical Debt

  • None at this time

Additional Notes

  • The DOBField component uses native date input for accessibility and browser compatibility
  • Age is calculated client-side and displayed in the user's selected language
  • The component validates against future dates and dates before 1900
  • Follows existing component patterns in the codebase (shadcn/ui style)
Edited by Suma Pullaiahgari

Merge request reports