Display patient age in mm dd when younger than 1y (ohcnetwork#6342)

src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx

@@ -10,7 +10,7 @@ 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 { formatDate, formatDateTime } from "../../../Utils/utils";
+import { formatAge, formatDate, formatDateTime } from "../../../Utils/utils";
 import ReadMore from "../../Common/components/Readmore";
 import { DailyRoundsList } from "../Consultations/DailyRoundsList";
 
@@ -621,7 +621,12 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
                 <div>
                   Age {" - "}
                   <span className="font-semibold">
-                    {props.patientData.age ?? "-"}
+                    {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
+                        )
+                      : "-"}
                   </span>
                 </div>
                 <div>

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 { formatDateTime } from "../../../../Utils/utils";
+import { formatAge, formatDateTime } from "../../../../Utils/utils";
 import { FC } from "react";
 
 const ReportRow = ({ data, name, min, max }: any) => {
@@ -53,6 +53,7 @@ interface ReportTableProps {
   patientDetails?: {
     name: string;
     age: number;
+    date_of_birth: string;
     hospitalName: string;
   };
   investigationData: InvestigationResponse;
@@ -83,7 +84,14 @@ const ReportTable: FC<ReportTableProps> = ({
         {patientDetails && (
           <div className="flex flex-col gap-1 p-1">
             <p>Name: {patientDetails.name}</p>
-            <p>Age: {patientDetails.age}</p>
+            <p>
+              Age:{" "}
+              {formatAge(
+                patientDetails.age,
+                patientDetails.date_of_birth,
+                true
+              )}
+            </p>
             <p>Hospital: {patientDetails.hospitalName}</p>
           </div>
         )}

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

@@ -100,8 +100,9 @@ const InvestigationReports = ({ id }: any) => {
   const [patientDetails, setPatientDetails] = useState<{
     name: string;
     age: number;
+    date_of_birth: string;
     hospitalName: string;
-  }>({ name: "", age: -1, hospitalName: "" });
+  }>({ name: "", age: -1, date_of_birth: "", hospitalName: "" });
   const [state, dispatch] = useReducer(
     investigationReportsReducer,
     initialState
@@ -220,13 +221,15 @@ const InvestigationReports = ({ id }: any) => {
           setPatientDetails({
             name: res.data.name,
             age: res.data.age,
+            date_of_birth: res.data.date_of_birth,
             hospitalName: res.data.facility_object.name,
           });
         }
       } else {
         setPatientDetails({
           name: "",
           age: -1,
+          date_of_birth: "",
           hospitalName: "",
         });
       }

src/Components/Facility/LegacyMonitorCard.tsx

@@ -4,6 +4,7 @@ import CareIcon from "../../CAREUI/icons/CareIcon";
 import { PatientModel } from "../Patient/models";
 import LegacyPatientVitalsCard from "../Patient/LegacyPatientVitalsCard";
 import { AssetLocationObject } from "../Assets/AssetTypes";
+import { formatAge } from "../../Utils/utils";
 
 interface MonitorCardProps {
   facilityId: string;
@@ -28,7 +29,7 @@ export const LegacyMonitorCard = ({
           {patient.name}
         </Link>
         <span>
-          {patient.age}y |{" "}
+          {formatAge(patient.age, patient.date_of_birth)} |{" "}
           {GENDER_TYPES.find((g) => g.id === patient.gender)?.icon}
         </span>
         <span className="flex flex-1 items-center justify-end gap-2 text-end">

src/Components/Facility/TreatmentSummary.tsx

@@ -10,7 +10,7 @@ import { statusType, useAbortableEffect } from "../../Common/utils";
 import { PatientModel } from "../Patient/models";
 
 import { GENDER_TYPES } from "../../Common/constants";
-import { formatDate, formatDateTime } from "../../Utils/utils";
+import { formatAge, formatDate, formatDateTime } from "../../Utils/utils";
 const Loading = lazy(() => import("../Common/Loading"));
 
 const TreatmentSummary = (props: any) => {
@@ -132,7 +132,8 @@ const TreatmentSummary = (props: any) => {
 
               <div className="grid border-b-2 border-gray-800 print:grid-cols-3 sm:grid-cols-2 md:grid-cols-3">
                 <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-r-2 md:border-b-0 ">
-                  <b>Age :</b> {patientData.age}
+                  <b>Age :</b>{" "}
+                  {formatAge(patientData.age, patientData.date_of_birth, 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 md:border-b-0 md:border-r-2">
                   <b>Date of admission :</b>

src/Components/Patient/ManagePatients.tsx

@@ -37,7 +37,7 @@ import SearchInput from "../Form/SearchInput";
 import SortDropdownMenu from "../Common/SortDropdown";
 import SwitchTabs from "../Common/components/SwitchTabs";
 import { parseOptionId } from "../../Common/utils";
-import { parsePhoneNumber } from "../../Utils/utils.js";
+import { formatAge, parsePhoneNumber } from "../../Utils/utils.js";
 import { useDispatch } from "react-redux";
 import useFilters from "../../Common/hooks/useFilters";
 import { useTranslation } from "react-i18next";
@@ -558,7 +558,9 @@ export const PatientManager = () => {
               <div className="flex w-full justify-between gap-2">
                 <div className="font-semibold">
                   <span className="text-xl capitalize">{patient.name}</span>
-                  <span className="ml-4 text-gray-800">{`${patient.age} yrs.`}</span>
+                  <span className="ml-4 text-gray-800">
+                    {formatAge(patient.age, patient.date_of_birth, true)}
+                  </span>
                 </div>
               </div>
 

src/Components/Patient/PatientHome.tsx

@@ -19,7 +19,7 @@ import { ConsultationModel } from "../Facility/models";
 import { PatientModel, SampleTestModel } from "./models";
 import { SampleTestCard } from "./SampleTestCard";
 import Chip from "../../CAREUI/display/Chip";
-import { classNames, formatDateTime } from "../../Utils/utils";
+import { classNames, formatAge, formatDateTime } from "../../Utils/utils";
 import ButtonV2 from "../Common/components/ButtonV2";
 import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
 import RelativeDateUserMention from "../Common/RelativeDateUserMention";
@@ -476,7 +476,12 @@ 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} - {patientData.age}
+                    {patientData.name} -{" "}
+                    {formatAge(
+                      patientData.age,
+                      patientData.date_of_birth,
+                      true
+                    )}
                   </h1>
                   <div className="ml-auto mr-9 flex flex-wrap gap-3">
                     {patientData.is_vaccinated ? (

src/Components/Patient/PatientInfoCard.tsx

@@ -20,7 +20,7 @@ import { PatientModel } from "./models";
 import { getDimensionOrDash } from "../../Common/utils";
 import useConfig from "../../Common/hooks/useConfig";
 import { useState } from "react";
-import { formatDate, formatDateTime } from "../../Utils/utils.js";
+import { formatAge, formatDate, formatDateTime } from "../../Utils/utils.js";
 import dayjs from "../../Utils/dayjs";
 
 export default function PatientInfoCard(props: {
@@ -171,7 +171,7 @@ export default function PatientInfoCard(props: {
               </p>
             )}
             <p className="text-sm text-gray-900 sm:text-sm">
-              <span>{patient.age} years</span>
+              <span>{formatAge(patient.age, patient.date_of_birth, true)}</span>
               <span className="mx-2">•</span>
               <span>{patient.gender}</span>
               {consultation?.suggestion === "DC" && (

src/Components/Patient/SampleDetails.tsx

@@ -8,7 +8,7 @@ import Card from "../../CAREUI/display/Card";
 import { FileUpload } from "./FileUpload";
 import Page from "../Common/components/Page";
 import _ from "lodash";
-import { formatDateTime } from "../../Utils/utils";
+import { formatAge, formatDateTime } from "../../Utils/utils";
 import { getTestSample } from "../../Redux/actions";
 
 import { navigate } from "raviger";
@@ -118,7 +118,7 @@ export const SampleDetails = ({ id }: SampleDetailsProps) => {
             ) : (
               <div>
                 <span className="font-semibold leading-relaxed">Age: </span>
-                {patientData?.age}
+                {formatAge(patientData.age, patientData.date_of_birth)}
               </div>
             )}
             <div>

src/Components/Shifting/ListView.tsx

@@ -12,7 +12,7 @@ import { ExportButton } from "../Common/Export";
 import ListFilter from "./ListFilter";
 import Page from "../Common/components/Page";
 import SearchInput from "../Form/SearchInput";
-import { formatDateTime } from "../../Utils/utils";
+import { formatAge, formatDateTime } from "../../Utils/utils";
 import { formatFilter } from "./Commons";
 import { navigate } from "raviger";
 import useConfig from "../../Common/hooks/useConfig";
@@ -127,7 +127,12 @@ export default function ListView() {
             <div>
               <div className="flex justify-between">
                 <div className="mb-2 text-xl font-bold capitalize">
-                  {shift.patient_object.name} - {shift.patient_object.age}
+                  {shift.patient_object.name} -{" "}
+                  {formatAge(
+                    shift.patient_object.age,
+                    shift.patient_object.date_of_birth,
+                    true
+                  )}
                 </div>
                 <div>
                   {shift.emergency && (

src/Components/Shifting/ShiftDetails.tsx

@@ -18,7 +18,7 @@ import { CopyToClipboard } from "react-copy-to-clipboard";
 import Page from "../Common/components/Page";
 import QRCode from "qrcode.react";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
-import { formatDateTime } from "../../Utils/utils";
+import { formatAge, formatDateTime } from "../../Utils/utils";
 import useConfig from "../../Common/hooks/useConfig";
 import { useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
@@ -110,7 +110,13 @@ export default function ShiftDetails(props: { id: string }) {
       "\n" +
       t("age") +
       ":" +
-      data?.patient_object?.age +
+      +(
+        formatAge(
+          data?.patient_object?.age,
+          data?.patient_object?.date_of_birth,
+          true
+        ) ?? "-"
+      ) +
       "\n" +
       t("origin_facility") +
       ":" +
@@ -195,7 +201,7 @@ export default function ShiftDetails(props: { id: string }) {
               <span className="font-semibold leading-relaxed">
                 {t("age")}:{" "}
               </span>
-              {patientData?.age}
+              {formatAge(patientData?.age, patientData?.date_of_birth, true)}
             </div>
           )}
           {patientData?.gender === 2 && patientData?.is_antenatal && (
@@ -380,7 +386,7 @@ export default function ShiftDetails(props: { id: string }) {
               <span className="font-semibold leading-relaxed">
                 {t("age")}:{" "}
               </span>
-              {patientData?.age}
+              {formatAge(patientData.age, patientData.date_of_birth, true)}
             </div>
             <div>
               <span className="font-semibold leading-relaxed">

src/Components/Shifting/ShiftingBoard.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { classNames, formatDateTime } from "../../Utils/utils";
+import { classNames, formatAge, formatDateTime } from "../../Utils/utils";
 import {
   completeTransfer,
   downloadShiftRequests,
@@ -78,7 +78,12 @@ const ShiftCard = ({ shift, filter }: any) => {
           <div>
             <div className="flex justify-between">
               <div className="mb-2 text-xl font-bold capitalize">
-                {shift.patient_object.name} - {shift.patient_object.age}
+                {shift.patient_object.name} -{" "}
+                {formatAge(
+                  shift.patient_object?.age,
+                  shift.patient_object?.age.date_of_birth,
+                  true
+                )}
               </div>
               <div>
                 {shift.emergency && (

src/Utils/utils.ts

@@ -379,3 +379,30 @@ export const getCountryCode = (phoneNumber: string) => {
   }
   return undefined;
 };
+
+export const formatAge = (
+  age?: number,
+  date_of_birth?: string,
+  abbreviated = false
+) => {
+  if (!age && !date_of_birth) return undefined;
+  if (!age) age = 0;
+
+  const daySuffix = abbreviated ? "d" : "days";
+  const monthSuffix = abbreviated ? "mo" : "months";
+  const yearSuffix = abbreviated ? "yr" : "years";
+
+  if (age < 1 && date_of_birth) {
+    const dob = new Date(date_of_birth);
+    const today = new Date();
+    const diffTime = Math.abs(today.getTime() - dob.getTime());
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    const months = Math.floor(diffDays / 30);
+    const days = diffDays % 30;
+    if (months === 0) {
+      return `${days} ${daySuffix}`;
+    }
+    return `${months} ${monthSuffix} ${days} ${daySuffix}`;
+  }
+  return `${age} ${yearSuffix}`;
+};