BN-84 | Refactor. Consultation Pad To Use Stores And Hooks For State Management (#29)

* BN-84 | Add. Encounter Details store to manage state for BasicForm inputs

* BN-84 | Refactor. Basic Form and Consultation Pad to use Encounter Details store

* BN-84 | Fix. Tests for Consultation Pad after using Zustand Store

* BN-84 | Refactor. Current encounter as active visit

* BN-84 | Add. Show loading unitl details of BasicForm is loaded

* BN-84 | Add. Missing test scenarios for Diagnosis store

* BN-84 | Fix. Incorrect i18n Keys

* BN-69 | Refactor. Use consultationDate For Bundle Creation

* BN-69 | Add. Error Handling in encounterDetailsStore

* BN-84 | Refactor. Handle Error Outside Of User Service

* BN-84 | Refactor. Handle Error Outside Of Encounter Concept Service

* BN-84 | Refactor. Handle Error Outside Of Location Service

* BN-84 | Refactor. Handle Error Outside Of Encounter Hook

* BN-84 | Refactor. Handle Error Outside Of ActivePractitioner Hook

* BN-84 | Refactor. Handle Error Outside Of ActiveVisit Hook

* BN-84 | Add. Inline Loading And Error State For BasicForm

* BN-84 | Refactor. Get PatientUUID From Hook For BasicForm

* BN-84 | Refactor. Set Pratitioner And User Details In BasicForm

* BN-84 | Refactor. Set PatientUUID In BasicForm

* BN-84 | Add. Button Disable Option For ActionArea

* BN-84 | Refactor. Handle State Outside Of ConsultationPad

* BN-84 | Fix. Path Aliases

* BN-84 | Refactor. Remove Invalid Text For Each Field

* BN-84 | Add. Error State In Consultation Pad

* BN-84 | Add. Diagnoses Form Search Error State

---------

Co-authored-by: MOHANKUMAR T <mohan13081999@gmail.com>

Author: rahu1ramesh

public/locales/locale_en.json

@@ -45,8 +45,8 @@
   "CONSULTATION_ERROR_INVALID_PRACTITIONER": "Invalid or missing practitioner",
   "CONSULTATION_PAD_CANCEL_BUTTON": "Cancel",
   "CONSULTATION_PAD_DONE_BUTTON": "Done",
-  "CONSULTATION_PAD_ERROR": "Something went wrong",
-  "CONSULTATION_PAD_LOADING": "Loading Consultation Pad",
+  "CONSULTATION_PAD_ERROR_TITLE": "Something went wrong",
+  "CONSULTATION_PAD_ERROR_BODY": "An error occurred while loading the consultation pad. Please try again later.",
   "CONSULTATION_PAD_TITLE": "New Consultation",
   "CONSULTATION_SUBMITTED_SUCCESS_MESSAGE": "Consultation saved successfully",
   "CONSULTATION_SUBMITTED_SUCCESS_TITLE": "Success",
@@ -76,9 +76,15 @@
   "ERROR_DEFAULT_MESSAGE": "An unexpected error occurred",
   "ERROR_DEFAULT_TITLE": "Error",
   "ERROR_FETCHING_CONCEPTS": "An unexpected error occurred. Please try again later.",
+  "ERROR_FETCHING_ENCOUNTER_DETAILS": "Error fetching encounter details",
+  "ERROR_FETCHING_LOCATIONS_DETAILS": "Error fetching locations details",
+  "ERROR_FETCHING_PRACTITIONERS_DETAILS": "Error fetching practitioners details",
+  "ERROR_FETCHING_USER_DETAILS": "Error fetching user details",
+  "ERROR_INVALID_PATIENT_UUID": "Invalid patient UUID",
   "ERROR_LOADING_DASHBOARD": "Error loading dashboard",
   "ERROR_NETWORK_MESSAGE": "Unable to connect to the server. Please check your internet connection.",
   "ERROR_NETWORK_TITLE": "Network Error",
+  "ERROR_NO_ACTIVE_VISIT_FOUND": "No active visit found",
   "ERROR_NO_DEFAULT_DASHBOARD": "No default dashboard configured",
   "ERROR_NOT_FOUND_MESSAGE": "The requested resource was not found.",
   "ERROR_NOT_FOUND_TITLE": "Not Found",

public/locales/locale_es.json

@@ -45,8 +45,8 @@
   "CONSULTATION_ERROR_INVALID_PRACTITIONER": "Profesional médico inválido o faltante",
   "CONSULTATION_PAD_CANCEL_BUTTON": "Cancelar",
   "CONSULTATION_PAD_DONE_BUTTON": "Hecho",
-  "CONSULTATION_PAD_ERROR": "Algo salió mal",
-  "CONSULTATION_PAD_LOADING": "Cargando Panel de Consulta",
+  "CONSULTATION_PAD_ERROR_TITLE": "Algo salió mal",
+  "CONSULTATION_PAD_ERROR_BODY": "Se produjo un error al cargar el panel de consulta. Por favor, inténtelo de nuevo más tarde.",
   "CONSULTATION_PAD_TITLE": "Nueva Consulta",
   "CONSULTATION_SUBMITTED_SUCCESS_MESSAGE": "Consulta salvado correctamente",
   "CONSULTATION_SUBMITTED_SUCCESS_TITLE": "Éxito",
@@ -76,9 +76,15 @@
   "ERROR_DEFAULT_MESSAGE": "Se produjo un error inesperado",
   "ERROR_DEFAULT_TITLE": "Error",
   "ERROR_FETCHING_CONCEPTS": "Se produjo un error inesperado. Por favor, inténtelo de nuevo mas tarde.",
+  "ERROR_FETCHING_ENCOUNTER_DETAILS": "Error al obtener los detalles del encuentro",
+  "ERROR_FETCHING_LOCATIONS_DETAILS": "Error al obtener detalles de ubicaciones",
+  "ERROR_FETCHING_PRACTITIONERS_DETAILS": "Error al obtener detalles de profesionales médicos",
+  "ERROR_FETCHING_USER_DETAILS": "Error al obtener detalles del usuario",
+  "ERROR_INVALID_PATIENT_UUID": "UUID de paciente inválido",
   "ERROR_LOADING_DASHBOARD": "Error al cargar el panel",
   "ERROR_NETWORK_MESSAGE": "No se puede conectar al servidor. Por favor, compruebe su conexión a Internet.",
   "ERROR_NETWORK_TITLE": "Error de red",
+  "ERROR_NO_ACTIVE_VISIT_FOUND": "No se encontró visita activa",
   "ERROR_NO_DEFAULT_DASHBOARD": "No hay panel predeterminado configurado",
   "ERROR_NOT_FOUND_MESSAGE": "No se encontró el recurso solicitado.",
   "ERROR_NOT_FOUND_TITLE": "No encontrado",
@@ -93,7 +99,7 @@
   "INVALID_RESPONSE": "Se recibió una respuesta no válida del servidor",
   "LAB_TEST_ACTIONS": "Acciones",
   "LAB_TEST_ERROR_LOADING": "Error al cargar pruebas de laboratorio",
-  "LAB_TEST_LOADING": "Loading lab tests...",
+  "LAB_TEST_LOADING": "Cargando pruebas de laboratorio...",
   "LAB_TEST_NAME": "Nombre de la prueba",
   "LAB_TEST_ORDERED_BY": "Ordenado por",
   "LAB_TEST_PANEL": "Panel",

src/__mocks__/consultationPadMocks.ts

@@ -38,7 +38,7 @@ export const mockPractitioner = {
   },
 };
 
-export const mockCurrentEncounter = {
+export const mockActiveVisit = {
   id: 'encounter-1',
   type: [
     {

src/__mocks__/encounterMocks.ts

@@ -1,4 +1,4 @@
-export const mockEncounterBundle = {
+export const mockVisitBundle = {
   resourceType: 'Bundle',
   id: '2c8da098-d083-42bf-a2d4-cc3bb4c67199',
   meta: {
@@ -227,5 +227,5 @@ export const mockEncounterBundle = {
   ],
 };
 
-// The current active encounter is the one without an end date
-export const mockCurrentEncounter = mockEncounterBundle.entry[3].resource;
+// The current active visit is the one without an end date
+export const mockActiveVisit = mockVisitBundle.entry[3].resource;

src/__mocks__/labInvestigationMocks.ts

@@ -5,7 +5,7 @@ import {
   LabTestStatus,
   LabTestPriority,
   LabTestsByDate,
-} from '@/types/labInvestigation';
+} from '@types/labInvestigation';
 
 // Mock patient UUID
 export const mockPatientUUID = 'test-patient-uuid';

src/components/clinical/consultationPad/ConsultationPad.tsx

@@ -1,24 +1,17 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import ActionArea from '@components/common/actionArea/ActionArea';
-import { useCurrentEncounter } from '@hooks/useCurrentEncounter';
-import { useActivePractitioner } from '@hooks/useActivePractitioner';
-import { useEncounterConcepts } from '@hooks/useEncounterConcepts';
-import { useLocations } from '@hooks/useLocations';
-import { Column, Grid, Loading, MenuItemDivider } from '@carbon/react';
-import * as styles from './styles/ConsultationPad.module.scss';
+import { Column, Grid, MenuItemDivider } from '@carbon/react';
 import BasicForm from '@components/clinical/forms/basic/BasicForm';
 import DiagnosesForm from '@components/clinical/forms/diagnoses/DiagnosesForm';
 import AllergiesForm from '@components/clinical/forms/allergies/AllergiesForm';
-import { Concept } from '@types/encounterConcepts';
 import { ConsultationBundle } from '@types/consultationBundle';
 import {
   postConsultationBundle,
   createDiagnosisBundleEntries,
   createAllergiesBundleEntries,
 } from '@services/consultationBundleService';
 import useNotification from '@hooks/useNotification';
-import { formatDate } from '@utils/date';
 import { createEncounterResource } from '@utils/fhir/encounterResourceCreator';
 import {
   createBundleEntry,
@@ -27,16 +20,14 @@ import {
 import { ERROR_TITLES } from '@constants/errors';
 import { useDiagnosisStore } from '@stores/diagnosisStore';
 import useAllergyStore from '@stores/allergyStore';
+import { useEncounterDetailsStore } from '@stores/encounterDetailsStore';
+import * as styles from './styles/ConsultationPad.module.scss';
 
 interface ConsultationPadProps {
-  patientUUID: string;
   onClose: () => void;
 }
 
-const ConsultationPad: React.FC<ConsultationPadProps> = ({
-  patientUUID,
-  onClose,
-}) => {
+const ConsultationPad: React.FC<ConsultationPadProps> = ({ onClose }) => {
   const [isSubmitting, setIsSubmitting] = React.useState(false);
 
   const { t } = useTranslation();
@@ -54,63 +45,55 @@ const ConsultationPad: React.FC<ConsultationPadProps> = ({
     validateAllAllergies,
     reset: resetAllergies,
   } = useAllergyStore();
-
-  const {
-    locations,
-    loading: loadingLocations,
-    error: errorLocations,
-  } = useLocations();
-  const {
-    encounterConcepts,
-    loading: loadingEncounterConcepts,
-    error: errorEncounterConcepts,
-  } = useEncounterConcepts();
-
+  // Use the encounter details store
   const {
+    activeVisit,
+    selectedLocation,
+    selectedEncounterType,
+    encounterParticipants,
+    consultationDate,
+    isEncounterDetailsFormReady,
     practitioner,
     user,
-    loading: loadingPractitioner,
-    error: errorPractitioner,
-  } = useActivePractitioner();
-
-  const {
-    currentEncounter,
-    loading: loadingEncounter,
-    error: errorEncounter,
-  } = useCurrentEncounter(patientUUID);
-
-  const encounterTypeSelected = encounterConcepts?.encounterTypes.find(
-    (item: Concept) => item.name === 'Consultation',
-  );
-
-  const currentEncounterId = currentEncounter?.type[0]?.coding[0]?.code || '';
-
-  const visitTypeSelected = encounterConcepts?.visitTypes.find(
-    (item: Concept) => item.uuid === currentEncounterId,
-  );
-
-  const formattedDate = formatDate(new Date());
+    patientUUID,
+    hasError,
+    reset: resetEncounterDetails,
+  } = useEncounterDetailsStore();
+
+  // Clean up on unmount
+  useEffect(() => {
+    return () => {
+      resetEncounterDetails();
+      resetAllergies();
+      resetDiagnoses();
+    };
+  }, [resetEncounterDetails, resetAllergies, resetDiagnoses]);
 
   // Data validation check for consultation submission
   const canSubmitConsultation = !!(
     patientUUID &&
     practitioner &&
     practitioner.uuid &&
-    currentEncounter &&
-    locations?.length > 0 &&
-    encounterTypeSelected
+    activeVisit &&
+    selectedLocation &&
+    selectedEncounterType &&
+    encounterParticipants.length > 0
   );
 
+  // TODO: Extract Business Logic
+  // 1. Create a consultationService to handle submission logic
+  // 2. Extract validation logic into a custom hook
+  // 3. Create utility functions for bundle creation
   const submitConsultation = () => {
     const enconterResourceURL = `urn:uuid:${crypto.randomUUID()}`;
     const encounterResource = createEncounterResource(
-      encounterTypeSelected!.uuid,
-      encounterTypeSelected!.name,
-      patientUUID,
-      [practitioner!.uuid],
-      currentEncounter!.id,
-      locations[0].uuid,
-      new Date(),
+      selectedEncounterType!.uuid,
+      selectedEncounterType!.name,
+      patientUUID!,
+      encounterParticipants.map((p) => p.uuid),
+      activeVisit!.id,
+      selectedLocation!.uuid,
+      consultationDate,
     );
     const encounterBundleEntry = createBundleEntry(
       enconterResourceURL,
@@ -122,6 +105,7 @@ const ConsultationPad: React.FC<ConsultationPadProps> = ({
       encounterSubject: encounterResource.subject!,
       encounterReference: enconterResourceURL,
       practitionerUUID: user!.uuid,
+      consultationDate,
     });
 
     const allergyEntries = createAllergiesBundleEntries({
@@ -154,6 +138,7 @@ const ConsultationPad: React.FC<ConsultationPadProps> = ({
         setIsSubmitting(false);
         resetDiagnoses();
         resetAllergies();
+        resetEncounterDetails();
         addNotification({
           title: t('CONSULTATION_SUBMITTED_SUCCESS_TITLE'),
           message: t('CONSULTATION_SUBMITTED_SUCCESS_MESSAGE'),
@@ -182,92 +167,50 @@ const ConsultationPad: React.FC<ConsultationPadProps> = ({
     onClose();
   };
 
-  if (
-    loadingEncounterConcepts ||
-    loadingLocations ||
-    loadingPractitioner ||
-    loadingEncounter ||
-    isSubmitting
-  ) {
-    return (
-      <ActionArea
-        title={t('CONSULTATION_PAD_TITLE')}
-        primaryButtonText={t('CONSULTATION_PAD_DONE_BUTTON')}
-        onPrimaryButtonClick={handleOnPrimaryButtonClick}
-        secondaryButtonText={t('CONSULTATION_PAD_CANCEL_BUTTON')}
-        onSecondaryButtonClick={handleOnSecondaryButtonClick}
-        content={
-          <Grid>
-            <Column sm={3} md={8} lg={16} className={styles.loadingContent}>
-              <Loading
-                description={t('CONSULTATION_PAD_LOADING')}
-                withOverlay={false}
-              />
-            </Column>
-          </Grid>
-        }
-      />
-    );
-  }
-
-  if (
-    errorLocations ||
-    errorEncounterConcepts ||
-    errorPractitioner ||
-    errorEncounter ||
-    !practitioner ||
-    !patientUUID ||
-    !encounterConcepts?.encounterTypes ||
-    !encounterConcepts?.visitTypes ||
-    !currentEncounter ||
-    !visitTypeSelected ||
-    !encounterTypeSelected ||
-    !locations ||
-    locations.length === 0 ||
-    formattedDate.error
-  ) {
-    return (
-      <ActionArea
-        title={t('CONSULTATION_PAD_TITLE')}
-        primaryButtonText={t('CONSULTATION_PAD_DONE_BUTTON')}
-        onPrimaryButtonClick={handleOnPrimaryButtonClick}
-        secondaryButtonText={t('CONSULTATION_PAD_CANCEL_BUTTON')}
-        onSecondaryButtonClick={handleOnSecondaryButtonClick}
-        content={
-          <Grid>
-            <Column sm={4} md={8} lg={16}>
-              <h2>{t('CONSULTATION_PAD_ERROR')}</h2>
-            </Column>
-          </Grid>
-        }
-      />
-    );
-  }
-
   return (
     <ActionArea
-      title={t('CONSULTATION_PAD_TITLE')}
+      title={hasError ? '' : t('CONSULTATION_PAD_TITLE')}
       primaryButtonText={t('CONSULTATION_PAD_DONE_BUTTON')}
       onPrimaryButtonClick={handleOnPrimaryButtonClick}
+      isPrimaryButtonDisabled={
+        !isEncounterDetailsFormReady || !canSubmitConsultation || isSubmitting
+      }
       secondaryButtonText={t('CONSULTATION_PAD_CANCEL_BUTTON')}
       onSecondaryButtonClick={handleOnSecondaryButtonClick}
       content={
-        <>
-          <BasicForm
-            practitioner={practitioner}
-            encounterTypes={encounterConcepts.encounterTypes}
-            encounterTypeSelected={encounterTypeSelected}
-            visitTypes={encounterConcepts.visitTypes}
-            visitTypeSelected={visitTypeSelected}
-            location={locations[0]}
-            locationSelected={locations[0]}
-            defaultDate={formattedDate.formattedResult}
-          />
-          <DiagnosesForm />
-          <MenuItemDivider />
-          <AllergiesForm />
-          <MenuItemDivider />
-        </>
+        hasError ? (
+          <>
+            <Grid className={styles.emptyState}>
+              <Column
+                sm={4}
+                md={8}
+                lg={16}
+                xlg={16}
+                className={styles.emptyStateTitle}
+              >
+                {t('CONSULTATION_PAD_ERROR_TITLE')}
+              </Column>
+              <Column
+                sm={4}
+                md={8}
+                lg={16}
+                xlg={16}
+                className={styles.emptyStateBody}
+              >
+                {t('CONSULTATION_PAD_ERROR_BODY')}
+              </Column>
+            </Grid>
+          </>
+        ) : (
+          <>
+            <BasicForm />
+            <MenuItemDivider />
+            <DiagnosesForm />
+            <MenuItemDivider />
+            <AllergiesForm />
+            <MenuItemDivider />
+          </>
+        )
       }
     />
   );