Add Age field in patient registration

cypress/e2e/patient_spec/patient_registration.cy.ts

@@ -26,8 +26,8 @@ describe("Patient Creation with consultation", () => {
   const patientExternal = new PatientExternal();
   const patientInsurance = new PatientInsurance();
   const patientMedicalHistory = new PatientMedicalHistory();
-  const phone_number = generatePhoneNumber();
-  const emergency_phone_number = generateEmergencyPhoneNumber();
+  let phone_number = generatePhoneNumber();
+  let emergency_phone_number = generateEmergencyPhoneNumber();
   const age = calculateAge();
   const patientFacility = "Dummy Facility 40";
   const patientDateOfBirth = "01012001";
@@ -74,13 +74,15 @@ describe("Patient Creation with consultation", () => {
 
   it("Create a new patient with all field in registration form and no consultation", () => {
     // patient details with all the available fields except covid
+    phone_number = generatePhoneNumber();
+    emergency_phone_number = generateEmergencyPhoneNumber();
     patientPage.createPatient();
     patientPage.selectFacility(patientFacility);
     patientPage.patientformvisibility();
     // Patient Details page
     patientPage.typePatientPhoneNumber(phone_number);
     patientPage.typePatientEmergencyNumber(emergency_phone_number);
-    patientPage.typePatientDateOfBirth(patientDateOfBirth);
+    patientPage.typePatientAge(age);
     patientPage.typePatientName(patientOneName);
     patientPage.selectPatientGender(patientOneGender);
     patientPage.typePatientAddress(patientOneAddress);
@@ -118,7 +120,8 @@ describe("Patient Creation with consultation", () => {
       emergency_phone_number,
       yearOfBirth,
       patientOneBloodGroup,
-      patientOccupation
+      patientOccupation,
+      "Year of Birth"
     );
     patientMedicalHistory.verifyPatientMedicalDetails(
       patientOnePresentHealth,
@@ -146,6 +149,7 @@ describe("Patient Creation with consultation", () => {
     // change the gender to female and input data to related changed field
     cy.wait(3000);
     patientPage.selectPatientGender(patientOneUpdatedGender);
+    patientPage.typePatientDateOfBirth(patientDateOfBirth);
     patientPage.clickPatientAntenatalStatusYes();
     patientPage.selectPatientBloodGroup(patientOneUpdatedBloodGroup);
     // Edit the patient consultation , select none medical history and multiple health ID
@@ -206,7 +210,8 @@ describe("Patient Creation with consultation", () => {
       emergency_phone_number,
       yearOfBirth,
       patientOneUpdatedBloodGroup,
-      patientOccupation
+      patientOccupation,
+      "Date of Birth"
     );
     // Verify No medical history
     patientMedicalHistory.verifyNoSymptosPresent("Diabetes");

cypress/pageobject/Patient/PatientCreation.ts

@@ -46,10 +46,16 @@ export class PatientPage {
   }
 
   typePatientDateOfBirth(dateOfBirth: string) {
+    cy.clickAndSelectOption("#ageOrDob-selector", "D.O.B");
     cy.get("#date_of_birth").scrollIntoView();
     cy.get("#date_of_birth").should("be.visible").click();
     cy.get("#date-input").click().type(dateOfBirth);
   }
+  typePatientAge(age: number) {
+    cy.clickAndSelectOption("#ageOrDob-selector", "Age");
+    cy.submitButton("Confirm");
+    cy.get("#age").clear().type(age);
+  }
 
   typePatientName(patientName: string) {
     cy.get("[data-testid=name] input").click().type(patientName);
@@ -138,7 +144,8 @@ export class PatientPage {
     emergencyPhoneNumber,
     yearOfBirth,
     bloodGroup,
-    occupation
+    occupation,
+    DobOrAge
   ) {
     cy.url().should("include", "/facility/");
     cy.get("[data-testid=patient-dashboard]").then(($dashboard) => {
@@ -150,6 +157,7 @@ export class PatientPage {
       expect($dashboard).to.contain(yearOfBirth);
       expect($dashboard).to.contain(bloodGroup);
       expect($dashboard).to.contain(occupation);
+      expect($dashboard).to.contain(DobOrAge);
     });
   }
 

src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx

@@ -10,7 +10,11 @@ import useVitalsAspectRatioConfig from "../../VitalsMonitor/useVitalsAspectRatio
 import { DISCHARGE_REASONS, SYMPTOM_CHOICES } from "../../../Common/constants";
 import PrescriptionsTable from "../../Medicine/PrescriptionsTable";
 import Chip from "../../../CAREUI/display/Chip";
-import { formatAge, formatDate, formatDateTime } from "../../../Utils/utils";
+import {
+  formatDate,
+  formatDateTime,
+  formatPatientAge,
+} from "../../../Utils/utils";
 import ReadMore from "../../Common/components/Readmore";
 import DailyRoundsList from "../Consultations/DailyRoundsList";
 import EventsList from "./Events/EventsList";
@@ -629,12 +633,7 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                   <div>
                     Age {" - "}
                     <span className="font-semibold">
-                      {props.patientData.age !== undefined // 0 is a valid age, so we need to check for undefined
-                        ? formatAge(
-                            props.patientData.age,
-                            props.patientData.date_of_birth
-                          )
-                        : "-"}
+                      {formatPatientAge(props.patientData)}
                     </span>
                   </div>
                   <div id="patient-weight">

src/Components/Facility/DischargedPatientsList.tsx

@@ -7,10 +7,10 @@ import { PatientModel } from "../Patient/models";
 import useQuery from "../../Utils/request/useQuery";
 import { debounce } from "lodash-es";
 import SearchInput from "../Form/SearchInput";
-import { formatAge } from "../../Utils/utils";
 import { GENDER_TYPES } from "../../Common/constants";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
+import { formatPatientAge } from "../../Utils/utils";
 import { useTranslation } from "react-i18next";
 import SwitchTabs from "../Common/components/SwitchTabs";
 
@@ -100,7 +100,7 @@ const PatientListItem = ({ patient }: { patient: PatientModel }) => {
         <h2 className="text-lg font-bold text-black">{patient.name}</h2>
         <span className="text-sm font-medium text-gray-800">
           {GENDER_TYPES.find((g) => g.id === patient.gender)?.text} -{" "}
-          {formatAge(patient.age, patient.date_of_birth)}
+          {formatPatientAge(patient)}
         </span>
         <div className="flex-1" />
         <RecordMeta

src/Components/Facility/Investigations/Reports/ReportTable.tsx

@@ -2,7 +2,7 @@ import { getColorIndex, rowColor, transformData } from "./utils";
 
 import ButtonV2 from "../../../Common/components/ButtonV2";
 import { InvestigationResponse } from "./types";
-import { formatAge, formatDateTime } from "../../../../Utils/utils";
+import { formatDateTime } from "../../../../Utils/utils";
 import { FC } from "react";
 
 const ReportRow = ({ data, name, min, max }: any) => {
@@ -52,8 +52,7 @@ interface ReportTableProps {
   title?: string;
   patientDetails?: {
     name: string;
-    age: number;
-    date_of_birth: string;
+    age: string;
     hospitalName: string;
   };
   investigationData: InvestigationResponse;
@@ -84,14 +83,7 @@ const ReportTable: FC<ReportTableProps> = ({
         {patientDetails && (
           <div className="flex flex-col gap-1 p-1">
             <p>Name: {patientDetails.name}</p>
-            <p>
-              Age:{" "}
-              {formatAge(
-                patientDetails.age,
-                patientDetails.date_of_birth,
-                true
-              )}
-            </p>
+            <p>Age: {patientDetails.age}</p>
             <p>Hospital: {patientDetails.hospitalName}</p>
           </div>
         )}

src/Components/Facility/Investigations/Reports/index.tsx

@@ -16,6 +16,7 @@ import AutocompleteMultiSelectFormField from "../../../Form/FormFields/Autocompl
 import { FieldChangeEvent } from "../../../Form/FormFields/Utils";
 import ReportTable from "./ReportTable";
 import { Investigation, InvestigationResponse } from "./types";
+import { formatPatientAge } from "../../../../Utils/utils";
 
 const RESULT_PER_PAGE = 14;
 interface InitialState {
@@ -386,8 +387,7 @@ const InvestigationReports = ({ id }: any) => {
                   title={t("report")}
                   patientDetails={{
                     name: patientData?.name || "",
-                    age: patientData?.age || -1,
-                    date_of_birth: patientData?.date_of_birth || "",
+                    age: patientData ? formatPatientAge(patientData, true) : "",
                     hospitalName: patientData?.facility_object?.name || "",
                   }}
                 />

src/Components/Facility/TreatmentSummary.tsx

@@ -1,5 +1,9 @@
 import { GENDER_TYPES } from "../../Common/constants";
-import { formatAge, formatDate, formatDateTime } from "../../Utils/utils";
+import {
+  formatDate,
+  formatDateTime,
+  formatPatientAge,
+} from "../../Utils/utils";
 import useSlug from "../../Common/hooks/useSlug";
 import useAppHistory from "../../Common/hooks/useAppHistory";
 import routes from "../../Redux/api";
@@ -66,11 +70,7 @@ const TreatmentSummary = (props: any) => {
               <div className="col-span-1 grid print:grid-cols-2 sm:grid-cols-2 ">
                 <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 print:border-b-0 print:border-r-2 sm:border-b-0 sm:border-r-2">
                   <b>Age :</b>{" "}
-                  {formatAge(
-                    patientData?.age ?? 0,
-                    patientData?.date_of_birth ?? "",
-                    true
-                  )}
+                  {patientData ? formatPatientAge(patientData, true) : ""}
                 </div>
                 <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 print:border-b-0 print:border-r-2 sm:border-b-0 sm:border-r-2">
                   <b>OP :</b> {consultationData?.patient_no ?? ""}

src/Components/Patient/ManagePatients.tsx

@@ -31,7 +31,7 @@ import RecordMeta from "../../CAREUI/display/RecordMeta";
 import SearchInput from "../Form/SearchInput";
 import SortDropdownMenu from "../Common/SortDropdown";
 import SwitchTabs from "../Common/components/SwitchTabs";
-import { formatAge, parsePhoneNumber } from "../../Utils/utils.js";
+import { formatPatientAge, parsePhoneNumber } from "../../Utils/utils.js";
 import useFilters from "../../Common/hooks/useFilters";
 import { useTranslation } from "react-i18next";
 import Page from "../Common/components/Page.js";
@@ -531,7 +531,7 @@ export const PatientManager = () => {
                 >
                   <span className="text-xl capitalize">{patient.name}</span>
                   <span className="text-gray-800">
-                    {formatAge(patient.age, patient.date_of_birth, true)}
+                    {formatPatientAge(patient, true)}
                   </span>
                 </div>
               </div>

src/Components/Patient/PatientHome.tsx

@@ -16,9 +16,9 @@ import { SampleTestCard } from "./SampleTestCard";
 import Chip from "../../CAREUI/display/Chip";
 import {
   classNames,
-  formatAge,
   formatDate,
   formatDateTime,
+  formatPatientAge,
 } from "../../Utils/utils";
 import ButtonV2 from "../Common/components/ButtonV2";
 import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
@@ -342,12 +342,7 @@ export const PatientHome = (props: any) => {
               <div>
                 <div className="flex flex-row gap-4">
                   <h1 className="flex flex-row pb-3 text-2xl font-bold">
-                    {patientData.name} -{" "}
-                    {formatAge(
-                      patientData.age,
-                      patientData.date_of_birth,
-                      true
-                    )}
+                    {patientData.name} - {formatPatientAge(patientData, true)}
                   </h1>
                   <div className="ml-auto mr-9 flex flex-wrap gap-3">
                     {patientData.is_vaccinated ? (
@@ -427,10 +422,14 @@ export const PatientHome = (props: any) => {
               <div className="mb-8 mt-2 grid grid-cols-1 gap-x-4 gap-y-2 md:grid-cols-2 md:gap-y-8 lg:grid-cols-4">
                 <div className="sm:col-span-1">
                   <div className="text-sm font-semibold leading-5 text-zinc-400">
-                    Date of Birth
+                    {patientData.date_of_birth
+                      ? "Date of Birth"
+                      : "Year of Birth"}
                   </div>
                   <div className="mt-1 text-sm font-medium leading-5">
-                    {formatDate(patientData?.date_of_birth)}
+                    {patientData.date_of_birth
+                      ? formatDate(patientData.date_of_birth)
+                      : patientData.year_of_birth}
                   </div>
                 </div>
                 <div className="sm:col-span-1">

src/Components/Patient/PatientInfoCard.tsx

@@ -15,7 +15,12 @@ import { useState } from "react";
 import CareIcon from "../../CAREUI/icons/CareIcon.js";
 import useConfig from "../../Common/hooks/useConfig.js";
 import dayjs from "../../Utils/dayjs.js";
-import { classNames, formatDate, formatDateTime } from "../../Utils/utils.js";
+import {
+  classNames,
+  formatDate,
+  formatDateTime,
+  formatPatientAge,
+} from "../../Utils/utils.js";
 import ABHAProfileModal from "../ABDM/ABHAProfileModal.js";
 import LinkABHANumberModal from "../ABDM/LinkABHANumberModal.js";
 import LinkCareContextModal from "../ABDM/LinkCareContextModal.js";
@@ -217,7 +222,7 @@ export default function PatientInfoCard(props: {
               >
                 {patient.name}
                 <div className="ml-3 mr-2 mt-[6px] text-sm font-semibold text-gray-600">
-                  {patient.age} years • {patient.gender}
+                  {formatPatientAge(patient, true)} • {patient.gender}
                 </div>
                 <div className="mr-3 flex flex-col items-center">
                   <Link
@@ -262,7 +267,7 @@ export default function PatientInfoCard(props: {
               >
                 {patient.name}
                 <div className="ml-3 mr-2 mt-[6px] text-sm font-semibold text-gray-600">
-                  {patient.age} years • {patient.gender}
+                  {formatPatientAge(patient, true)} • {patient.gender}
                 </div>
               </div>
               <div className="flex flex-wrap items-center gap-2 text-sm sm:flex-row">