U4X-1018: Fix the continous time count down of patients who are completed

packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx

@@ -27,6 +27,7 @@ import {
   formatWaitTime,
   getProviderTagColor,
   getTagColor,
+  getWaitTimeInMinutes,
   trimVisitNumber,
 } from '../../helpers/functions';
 import PickPatientActionMenu from '../pick-queue-patient-action-action.component';
@@ -52,6 +53,7 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
   const session = useSession();
   const layout = useLayoutType();
   const [searchTerm, setSearchTerm] = useState('');
+  const [tick, setTick] = useState(0);
 
   const { clinicalRoomTag } = useConfig<PatientQueueConfig>();
 
@@ -157,6 +159,14 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
     return entries;
   }, [items, searchTerm, status, clinicalRoomTag]);
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTick((prev) => prev + 1);
+    }, 60000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   const tableRows = useMemo(() => {
     return filteredPatientQueueEntries.map((patientqueue, index) => ({
       ...patientqueue,
@@ -191,16 +201,22 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
         ),
       },
       waitTime: {
-        content: (
-          <Tag>
-            <span
-              className={styles.statusContainer}
-              style={{ color: getTagColor(`${dayjs().diff(dayjs(patientqueue?.dateCreated), 'minutes')}`) }}
-            >
-              {formatWaitTime(patientqueue?.dateCreated, t)}
-            </span>
-          </Tag>
-        ),
+        content: (() => {
+          const minutes = getWaitTimeInMinutes(patientqueue);
+
+          return (
+            <Tag>
+              <span
+                className={styles.statusContainer}
+                style={{
+                  color: getTagColor((minutes ?? 0).toString()),
+                }}
+              >
+                {formatWaitTime(minutes, t)}
+              </span>
+            </Tag>
+          );
+        })(),
       },
       actions: {
         content: (

packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx

@@ -27,6 +27,7 @@ import {
   formatWaitTime,
   getProviderTagColor,
   getTagColor,
+  getWaitTimeInMinutes,
   trimVisitNumber,
 } from '../../helpers/functions';
 import PickQueuePatientActionMenu from '../pick-queue-patient-action-action.component';
@@ -53,6 +54,7 @@ const ActiveTriageVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) =
   const layout = useLayoutType();
 
   const { triageRoomTag } = useConfig<PatientQueueConfig>();
+  const [tick, setTick] = useState(0);
 
   const [isToggled, setIsToggled] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
@@ -145,6 +147,14 @@ const ActiveTriageVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) =
     return entries;
   }, [items, status, searchTerm, triageRoomTag]);
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTick((prev) => prev + 1);
+    }, 60000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   const tableRows = useMemo(() => {
     return filteredPatientQueueEntries.map((patientqueue, index) => ({
       ...patientqueue,
@@ -177,16 +187,22 @@ const ActiveTriageVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) =
         ),
       },
       waitTime: {
-        content: (
-          <Tag>
-            <span
-              className={styles.statusContainer}
-              style={{ color: getTagColor(`${dayjs().diff(dayjs(patientqueue?.dateCreated), 'minutes')}`) }}
-            >
-              {formatWaitTime(patientqueue?.dateCreated, t)}
-            </span>
-          </Tag>
-        ),
+        content: (() => {
+          const minutes = getWaitTimeInMinutes(patientqueue);
+
+          return (
+            <Tag>
+              <span
+                className={styles.statusContainer}
+                style={{
+                  color: getTagColor((minutes ?? 0).toString()),
+                }}
+              >
+                {formatWaitTime(minutes, t)}
+              </span>
+            </Tag>
+          );
+        })(),
       },
       actions: {
         content: (

packages/esm-patient-queues-app/src/components/actions/death/death-notification-actions-button.component.tsx

@@ -1,21 +1,19 @@
-import { launchWorkspace } from "@openmrs/esm-framework";
-import React, { useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import styles from "./death-notification-actions.scss";
+import { launchWorkspace } from '@openmrs/esm-framework';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './death-notification-actions.scss';
 
-
-const DeathNotificationActionsButton : React.FC = () => {
-   const { t } = useTranslation();
+const DeathNotificationActionsButton: React.FC = () => {
+  const { t } = useTranslation();
 
   const handleLaunchWorkspace = useCallback(() => {
-  launchWorkspace('patient-form-entry-workspace', {
-    formInfo: {
-      formUuid: 'bb282ac8-d8b6-4d76-88b9-86da83efec41',
-    },
-    workspaceTitle: 'Notification and Certification of Death',
-  });
-}, []);
-
+    launchWorkspace('patient-form-entry-workspace', {
+      formInfo: {
+        formUuid: 'bb282ac8-d8b6-4d76-88b9-86da83efec41',
+      },
+      workspaceTitle: 'Notification and Certification of Death',
+    });
+  }, []);
 
   return (
     <li className="cds--overflow-menu-options__option">
@@ -30,6 +28,6 @@ const DeathNotificationActionsButton : React.FC = () => {
       </button>
     </li>
   );
-}
+};
 
-export default DeathNotificationActionsButton;
+export default DeathNotificationActionsButton;

packages/esm-patient-queues-app/src/helpers/functions.ts

@@ -20,20 +20,16 @@ export const trimVisitNumber = (visitNumber: string) => {
   return visitNumber.substring(15);
 };
 
-export const formatWaitTime = (dateCreated: string, t) => {
-  if (!dateCreated) return t('unknown', 'Unknown');
+export const formatWaitTime = (minutes: number | null, t) => {
+  if (minutes === null || isNaN(minutes)) return t('unknown', 'Unknown');
 
-  const now = dayjs();
-  const createdTime = dayjs(dateCreated);
-  const diffInMinutes = now.diff(createdTime, 'minute');
-
-  const hours = Math.floor(diffInMinutes / 60);
-  const minutes = diffInMinutes % 60;
+  const hours = Math.floor(minutes / 60);
+  const remainingMinutes = minutes % 60;
 
   if (hours > 0) {
-    return `${hours} ${t('hoursAnd', 'hours and')} ${minutes} ${t('minutes', 'minutes')}`;
+    return `${hours} ${t('hoursAnd', 'hours and')} ${remainingMinutes} ${t('minutes', 'minutes')}`;
   } else {
-    return `${minutes} ${t('minutes', 'minutes')}`;
+    return `${remainingMinutes} ${t('minutes', 'minutes')}`;
   }
 };
 
@@ -71,3 +67,17 @@ export const convertTime12to24 = (time12h, timeFormat: amPm) => {
 
   return [hours, minutes];
 };
+
+export const getWaitTimeInMinutes = (queue) => {
+  if (!queue) return null;
+
+  if (queue.status === 'COMPLETED') {
+    if (queue.dateCreated && queue.dateChanged) {
+      return dayjs(queue.dateChanged).diff(dayjs(queue.dateCreated), 'minutes');
+    }
+  } else if (queue.dateCreated) {
+    return dayjs().diff(dayjs(queue.dateCreated), 'minutes');
+  }
+
+  return null;
+};

packages/esm-patient-queues-app/src/index.ts

@@ -26,7 +26,7 @@ import endVisitConfirmationModalComponent from './active-visits/end-visit/end-vi
 
 import endVisitActionButtonComponent from './active-visits/end-visit/end-visit-action-button.component';
 
-import deathNotificationActionsButtonComponent from './components/actions/death/death-notification-actions-button.component'
+import deathNotificationActionsButtonComponent from './components/actions/death/death-notification-actions-button.component';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 

packages/esm-patient-queues-app/src/queue-reception-home.component.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PatientQueueHeader from './components/patient-queue-header/patient-queue-header.component';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
@@ -12,7 +12,13 @@ import {
 } from './active-visits/patient-queues.resource';
 import { useServicePointCount } from './components/patient-queue-metrics/clinic-metrics.resource';
 import { ExtensionSlot, useSession, closeWorkspace } from '@openmrs/esm-framework';
-import { buildStatusString, formatWaitTime, getTagColor, trimVisitNumber } from './helpers/functions';
+import {
+  buildStatusString,
+  formatWaitTime,
+  getTagColor,
+  getWaitTimeInMinutes,
+  trimVisitNumber,
+} from './helpers/functions';
 import EditActionsMenu from './active-visits/edit-action-menu.components';
 import QueueLauncher from './components/queue-launcher/queue-launcher.component';
 
@@ -43,6 +49,7 @@ const ReceptionHome: React.FC = () => {
   const { t } = useTranslation();
   const session = useSession();
   const { location } = useParentLocation(session?.sessionLocation?.uuid);
+  const [tick, setTick] = useState(0);
 
   const { isPatientSearchOpen, hidePatientSearch, showPatientSearch } = usePatientSearchVisibility();
 
@@ -100,6 +107,14 @@ const ReceptionHome: React.FC = () => {
     return entries;
   }, [items, searchTerm]);
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTick((prev) => prev + 1);
+    }, 60000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   // Prepare table rows
   const tableRows = useMemo(() => {
     return filteredPatientQueueEntries.map((patientqueue, index) => ({
@@ -117,16 +132,22 @@ const ReceptionHome: React.FC = () => {
         ),
       },
       waitTime: {
-        content: (
-          <Tag>
-            <span
-              className={styles.statusContainer}
-              style={{ color: `${getTagColor(`${dayjs().diff(dayjs(patientqueue?.dateCreated), 'minutes')}`)}` }}
-            >
-              {formatWaitTime(patientqueue?.dateCreated, t)}
-            </span>
-          </Tag>
-        ),
+        content: (() => {
+          const minutes = getWaitTimeInMinutes(patientqueue);
+
+          return (
+            <Tag>
+              <span
+                className={styles.statusContainer}
+                style={{
+                  color: getTagColor((minutes ?? 0).toString()),
+                }}
+              >
+                {formatWaitTime(minutes, t)}
+              </span>
+            </Tag>
+          );
+        })(),
       },
       actions: {
         content: (