Skip to content

Feat/vitals history ui enhancement

Laxman Reddy requested to merge feat/vitals-history-ui-enhancement into develop

📌 Summary

This MR improves the Vitals History section in RecordVitalsPage.tsx by enhancing layout structure, icon styling, and clinical status-based color indication.

🎨 UI Changes

  • Moved date to a separate top row for better hierarchy.
  • Ensured all vitals display in a single horizontal line.
  • Added colorful circular icon badges for each vital.
  • Standardized vital format:
    • BP: 120/80
    • HR: 78
    • Pulse: 76
    • RBS: 100
    • Height: 170 cm
    • Weight: 70 kg
  • Replaced missing values with -.

🩺 Status-Based Color Logic

Vital numeric values are color-coded based on medical ranges:

  • 🔴 High

    • BP > 130/80
    • RBS > 140
    • Pulse/HR > 100

  • 🟡 Low

    • BP < 90/60
    • RBS < 70
    • Pulse/HR < 60

  • 🟢 Normal

    • Within standard clinical range

  • ⚪ Missing

    • Displayed as - in gray

Only the numeric value is color-styled.
Icons and labels remain neutral for clarity.

🔒 Scope

  • UI-only changes
  • No backend or API modifications
  • No changes to existing business logic
  • No breaking changes
Edited by Laxman Reddy

Merge request reports