Merge Develop to Staging v24.29.0 | Minor Fix to Enhance Data Entry Experience

src/Components/Facility/ConsultationForm.tsx

@@ -1230,16 +1230,9 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                       required={["A", "DC", "OP"].includes(
                         state.form.suggestion,
                       )}
-                      label={
-                        {
-                          A: "Date & Time of Admission to the Facility",
-                          DC: "Date & Time of Domiciliary Care commencement",
-                          OP: "Date & Time of Out-patient visit",
-                          DD: "Date & Time of Consultation",
-                          HI: "Date & Time of Consultation",
-                          R: "Date & Time of Consultation",
-                        }[state.form.suggestion]
-                      }
+                      label={t(
+                        `encounter_date_field_label__${state.form.suggestion}`,
+                      )}
                       type="datetime-local"
                       value={dayjs(state.form.encounter_date).format(
                         "YYYY-MM-DDTHH:mm",
@@ -1251,6 +1244,21 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                           : undefined
                       }
                     />
+                    {dayjs().diff(state.form.encounter_date, "day") > 30 && (
+                      <div className="mb-6">
+                        <span className="font-medium text-warning-500">
+                          <CareIcon
+                            icon="l-exclamation-triangle"
+                            className="pr-2 text-lg"
+                          />
+                          {t("caution")}:{" "}
+                          {t("back_dated_encounter_date_caution")}{" "}
+                          <strong className="font-bold">
+                            {dayjs(state.form.encounter_date).fromNow()}.
+                          </strong>
+                        </span>
+                      </div>
+                    )}
                   </div>
 
                   {state.form.route_to_facility === 30 && (

src/Components/Facility/DischargeModal.tsx

@@ -25,6 +25,7 @@ import { FacilitySelect } from "../Common/FacilitySelect";
 import { FacilityModel } from "./models";
 import dayjs from "../../Utils/dayjs";
 import { FieldError } from "../Form/FieldValidators";
+import { useTranslation } from "react-i18next";
 
 interface PreDischargeFormInterface {
   new_discharge_reason: number | null;
@@ -57,6 +58,7 @@ const DischargeModal = ({
   discharge_date = dayjs().format("YYYY-MM-DDTHH:mm"),
   death_datetime = dayjs().format("YYYY-MM-DDTHH:mm"),
 }: IProps) => {
+  const { t } = useTranslation();
   const { enable_hcx } = useConfig();
   const dispatch: any = useDispatch();
   const [preDischargeForm, setPreDischargeForm] =
@@ -205,6 +207,19 @@ const DischargeModal = ({
     }));
   };
 
+  const encounterDuration = dayjs
+    .duration(
+      dayjs(
+        preDischargeForm[
+          discharge_reason ===
+          DISCHARGE_REASONS.find((i) => i.text == "Expired")?.id
+            ? "death_datetime"
+            : "discharge_date"
+        ],
+      ).diff(consultationData.encounter_date),
+    )
+    .humanize();
+
   return (
     <DialogModal
       title={
@@ -321,7 +336,6 @@ const DischargeModal = ({
               : errors?.discharge_date
           }
         />
-
         {discharge_reason ===
           DISCHARGE_REASONS.find((i) => i.text == "Recovered")?.id && (
           <>
@@ -374,7 +388,13 @@ const DischargeModal = ({
         </div>
       )}
 
-      <div className="flex flex-col gap-2 pt-4 md:flex-row md:justify-end">
+      <div className="py-4">
+        <span className="text-gray-700">
+          {t("encounter_duration_confirmation")}{" "}
+          <strong>{encounterDuration}</strong>.
+        </span>
+      </div>
+      <div className="cui-form-button-group">
         <Cancel onClick={onClose} />
         {isSendingDischargeApi ? (
           <CircularProgress />

src/Components/Form/FormFields/PhoneNumberFormField.tsx

@@ -7,15 +7,17 @@ import {
   formatPhoneNumber as formatPhoneNumberUtil,
   getCountryCode,
   CountryData,
+  humanizeStrings,
 } from "../../../Utils/utils";
 import phoneCodesJson from "../../../Common/static/countryPhoneAndFlags.json";
 import {
   FieldError,
   PhoneNumberValidator,
   PhoneNumberType,
 } from "../FieldValidators";
-import CareIcon, { IconName } from "../../../CAREUI/icons/CareIcon";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { Popover } from "@headlessui/react";
+import { useTranslation } from "react-i18next";
 
 const phoneCodes: Record<string, CountryData> = phoneCodesJson;
 
@@ -154,29 +156,22 @@ export default function PhoneNumberFormField(props: Props) {
   );
 }
 
-const phoneNumberTypeIcons: Record<PhoneNumberType, IconName> = {
-  international_mobile: "l-globe",
-  indian_mobile: "l-mobile-android",
-  mobile: "l-mobile-android",
-  landline: "l-phone",
-  support: "l-headset",
-};
+const PhoneNumberTypesHelp = (props: { types: PhoneNumberType[] }) => {
+  const { t } = useTranslation();
 
-const PhoneNumberTypesHelp = ({ types }: { types: PhoneNumberType[] }) => (
-  <div className="flex gap-1">
-    {types.map((type) => (
-      <span key={type} className="tooltip mt-1">
-        <CareIcon
-          icon={phoneNumberTypeIcons[type]}
-          className="text-lg text-gray-500"
-        />
-        <span className="tooltip-text tooltip-bottom -translate-x-1/2 translate-y-1 text-xs capitalize">
-          {type.replace("_", " ")}
-        </span>
-      </span>
-    ))}
-  </div>
-);
+  return (
+    <div className="tooltip mt-1 pr-1 text-gray-500">
+      <CareIcon icon="l-question-circle" className="text-lg" />
+      <div className="tooltip-text tooltip-bottom w-64 -translate-x-full whitespace-pre-wrap text-sm">
+        Supports only{" "}
+        <span className="font-bold lowercase">
+          {humanizeStrings(props.types.map((item) => t(item)))}
+        </span>{" "}
+        numbers.
+      </div>
+    </div>
+  );
+};
 
 const conditionPhoneCode = (code: string) => {
   code = code.split(" ")[0];

src/Components/Patient/ManagePatients.tsx

@@ -610,7 +610,7 @@ export const PatientManager = () => {
                         size="small"
                         variant="primary"
                         startIcon="l-clock-three"
-                        text={`IP Days: ${dayjs().diff(patient.last_consultation.encounter_date, "day")}`}
+                        text={`IP Day No: ${dayjs().diff(patient.last_consultation.encounter_date, "day") + 1}`}
                       />
                     )}
                   {patient.gender === 2 &&

src/Components/Patient/PatientInfoCard.tsx

@@ -559,12 +559,12 @@ export default function PatientInfoCard(props: {
                     {dayjs(consultation.discharge_date || undefined).diff(
                       consultation.encounter_date,
                       "day",
-                    )}
+                    ) + 1}
                   </span>
                 </div>
               </div>
               <span className="mt-1 text-xs font-medium text-gray-700">
-                IP Days
+                IP Day No
               </span>
             </div>
           )}

src/Components/Users/UserAdd.tsx

@@ -608,7 +608,8 @@ export const UserAdd = (props: UserProps) => {
           className="inline-block rounded border border-gray-600 bg-gray-50 px-4 py-2 text-gray-600 transition hover:bg-gray-100"
           target="_blank"
         >
-          <CareIcon icon="l-info-circle" className="text-lg" /> &nbsp;Need Help?
+          <CareIcon icon="l-question-circle" className="text-lg" /> &nbsp;Need
+          Help?
         </Link>
       }
       backUrl="/users"

src/Locale/en/Common.json

@@ -48,6 +48,11 @@
   "filter": "Filter",
   "ordering": "Ordering",
   "phone_number": "Phone Number",
+  "international_mobile": "International Mobile",
+  "indian_mobile": "Indian Mobile",
+  "mobile": "Mobile",
+  "landline": "Indian landline",
+  "support": "Support",
   "emergency_contact_number": "Emergency Contact Number",
   "last_modified": "Last Modified",
   "patient_address": "Patient Address",
@@ -166,5 +171,6 @@
   "treating_doctor": "Treating Doctor",
   "ration_card__NO_CARD": "Non-card holder",
   "ration_card__BPL": "BPL",
-  "ration_card__APL": "APL"
+  "ration_card__APL": "APL",
+  "caution": "Caution"
 }

src/Locale/en/Consultation.json

@@ -36,5 +36,13 @@
   "prev_sessions": "Prev Sessions",
   "next_sessions": "Next Sessions",
   "no_changes": "No changes",
-  "encounter_suggestion_edit_disallowed": "Not allowed to switch to this option in edit consultation"
+  "encounter_suggestion_edit_disallowed": "Not allowed to switch to this option in edit consultation",
+  "encounter_date_field_label__A": "Date & Time of Admission to the Facility",
+  "encounter_date_field_label__DC": "Date & Time of Domiciliary Care commencement",
+  "encounter_date_field_label__OP": "Date & Time of Out-patient visit",
+  "encounter_date_field_label__DD": "Date & Time of Consultation",
+  "encounter_date_field_label__HI": "Date & Time of Consultation",
+  "encounter_date_field_label__R": "Date & Time of Consultation",
+  "back_dated_encounter_date_caution": "You are creating an encounter for",
+  "encounter_duration_confirmation": "The duration of this encounter would be"
 }

src/Utils/utils.ts

@@ -454,3 +454,22 @@ export const isPostPartum = (data_of_delivery?: string) => {
 export const isAntenatal = (menstruation_start_date?: string) => {
   return dayjs().diff(menstruation_start_date, "month") <= 9;
 };
+
+/**
+ * A utility method to format an array of string to human readable format.
+ *
+ * @param values Array of strings to be made human readable.
+ * @returns Human readable version of the list of strings
+ */
+export const humanizeStrings = (strings: readonly string[], empty = "") => {
+  if (strings.length === 0) {
+    return empty;
+  }
+
+  if (strings.length === 1) {
+    return strings[0];
+  }
+
+  const [last, ...items] = [...strings].reverse();
+  return `${items.reverse().join(", ")} and ${last}`;
+};