Skip to content

Temperature Field Integration in Patient Vitals

Issue: Temperature Field Integration in Patient Vitals (Frontend)

Issue Summary

The digital vitals recording system currently lacks a dedicated field for capturing body temperature. This feature aims to add a numeric input field for Temperature in the RecordVitalsPage, supporting decimal values and ensuring correct synchronization with the patient history view and API mutation.

Current Behavior: Only Pulse, Heart Rate, RBS, Height, and Weight are recorded. Expected Behavior: A new "Temperature" field is available, validates input (e.g., 98.6), and accurately displays in history sections.

Problem Statement

Volunteers at medical camps need to record patient temperatures to detect fevers and monitor health trends. Without this field:

  • Medical assessments are incomplete.
  • Volunteers may use the "Notes" field, making the data unstructured and difficult to track.
  • The system impact is a lack of structured clinical data for further diagnosis.

The issue can be reproduced by navigating to the "Record Vitals" page and observing the absence of a Temperature input.

Proposed Solution

Implement a frontend-only update (assuming API support exists) by:

  1. Adding temperature to the VitalUpdate and VitalWithCampInfo TypeScript interfaces.
  2. Integrating a responsive input field in RecordVitalsPage.tsx with decimal support.
  3. Updating the VitalsHistory rendering logic in VitalsByCampSection.tsx.

Test-Driven Development

Acceptance Criteria (Given-When-Then)

Scenario 1: Input Validation for Decimal Values

Given the volunteer is on the Record Vitals page
 When they enter "98.6" into the Temperature field
 Then no validation error should be shown
  And the "Save Vitals" button should remain enabled

Scenario 2: Input Validation for Non-Numeric Characters

Given the volunteer is on the Record Vitals page
 When they attempt to type "abc" or spaces into the Temperature field
 Then the characters should not appear in the input

Scenario 3: Viewing Temperature in History

Given a patient has a recorded temperature of "99.5"
 When I view the Vitals History table
 Then I should see "99.5" in the Temperature column

Test Cases

Test ID Test Description Precondition Test Steps Expected Result Priority
TC-001 Decimal Support Page loaded 1. Enter "98.6"
2. Submit		 API payload contains temperature: 98.6 High
TC-002 Field Validation Page loaded 1. Enter "invalid"
2. Blur field		 Error "Must be a valid temperature reading" High
TC-003 Default State New Patient 1. Open form Temperature field is empty/null Med

Unit Test Requirements

Components/Functions to Test:

Module/Component Function/Hook Test Cases to Cover
RecordVitalsPage.tsx handleFloatChange TC-001
RecordVitalsPage.tsx validateField TC-002
VitalsByCampSection.tsx render TC-003

Test Assertions Required:

  • Renders correctly with initial state
  • Handles user input correctly
  • Validates input and shows errors
  • Calls API with correct payload
  • Updates UI state appropriately

Implementation Details

Files to Change

File Path Action Purpose
src/types/api.ts Modify Update vital interfaces
src/pages/volunteer/RecordVitalsPage.tsx Modify Add form field and logic
src/components/VitalsByCampSection.tsx Modify Display in history
src/locales/en/translations.json Modify Internationalization

Technical Considerations

  • State Management: Uses local useState for manual input tracking and useMutation (TanStack Query) for persistence.
  • Precision: Must use parseFloat instead of parseInt to maintain medical accuracy (e.g., 99.1 vs 99).
  • Control: Input uses inputMode="numeric" to trigger the correct mobile keypad.

UI/UX Requirements

  • Field should be placed next to "Weight" or in a logical grouping of physical vitals.
  • Placeholder should be 98.6 to guide volunteers on the expected format.
  • Validation should be real-time on blur or change.

Testing Strategy

Manual Testing

Test Environment:

  • Browser: Chrome/Firefox
  • User Role: Volunteer

Manual Test Steps:

  1. Navigate to Record Vitals.
  2. Search for a patient.
  3. Verify Temperature field appears with "98.6" placeholder.
  4. Input "99.5" and save.
  5. Verify the "Vitals History" section below reflects the new value.

Automated Testing

  • Component render tests (RecordVitalsPage)
  • User interaction tests (Entering decimals)
  • API integration tests (Checking mutate payload)

Test Data Requirements

const mockVitalData = {
  book_no: 3,
  temperature: 98.6,
  pulse: 72,
  bp_manual: "120/80"
}

Definition of Done

  • Acceptance criteria met
  • Manual testing completed
  • UI match current design system (Glassmorphism/Dark Mode)
  • Responsive on Mobile and Desktop
  • No console errors
  • TypeScript types defined (no any)
  • ESLint/Prettier checks pass
  • i18n strings externalized

Additional Context