@kenyaemr/esm-express-workflow-app 5.4.3 → 5.4.4-pre.100

package/src/components/registration/start-visit-form/start-visit-workspace/visit-form.resource.ts

@@ -0,0 +1,383 @@
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+import dayjs from 'dayjs';
+import useSWRImmutable from 'swr/immutable';
+import { z } from 'zod';
+import {
+  type FetchResponse,
+  openmrsFetch,
+  restBaseUrl,
+  useConfig,
+  useConnectivity,
+  useEmrConfiguration,
+  useFeatureFlag,
+  useSession,
+  useVisitTypes,
+  type Visit,
+} from '@openmrs/esm-framework';
+import { time12HourFormatRegex, type amPm } from '@openmrs/esm-patient-common-lib';
+import { useDefaultVisitLocation } from '../hooks/useDefaultVisitLocation';
+import { useOfflineVisitType } from '../hooks/useOfflineVisitType';
+import { ExpressWorkflowConfig } from '../../../../config-schema';
+
+export const visitStatuses = ['new', 'ongoing', 'past'] as const;
+export type VisitStatus = (typeof visitStatuses)[number];
+
+export type VisitFormData = {
+  visitStatus: VisitStatus;
+  visitStartDate: Date;
+  visitStartTime: string;
+  visitStartTimeFormat: amPm;
+  visitStopDate: Date;
+  visitStopTime: string;
+  visitStopTimeFormat: amPm;
+  programType: string;
+  visitType: string;
+  visitLocation: {
+    display?: string;
+    uuid?: string;
+  };
+  visitAttributes: {
+    [x: string]: string;
+  };
+};
+
+export type FieldError = {
+  [key: string]: Array<{ code: string; message: string }>;
+};
+
+export type ErrorObject = {
+  error: {
+    code: string;
+    message: string;
+    detail: string;
+    fieldErrors?: FieldError;
+    globalErrors?: Array<{ code: string; message: string }>;
+  };
+};
+
+export function extractErrorMessagesFromResponse(errorObject: ErrorObject, t: TFunction) {
+  const { fieldErrors, globalErrors, message, code } = errorObject?.error ?? {};
+
+  if (fieldErrors && Object.keys(fieldErrors).length > 0) {
+    return Object.values(fieldErrors)
+      .flatMap((errors) => errors.map((error) => error.message))
+      .join('\n');
+  }
+
+  if (globalErrors && globalErrors.length > 0) {
+    return globalErrors.map((error) => error.message).join('\n');
+  }
+
+  return message ?? code ?? t('unknownError', 'Unknown error');
+}
+
+export function useConditionalVisitTypes() {
+  const isOnline = useConnectivity();
+  const visitTypesHook = isOnline ? useVisitTypes : useOfflineVisitType;
+  return visitTypesHook();
+}
+
+interface PatientPersonResponse {
+  person: {
+    birthdate: string | null;
+    birthdateEstimated: boolean;
+    age: number | null;
+  };
+}
+
+const patientPersonCustomRep = 'custom:(person:(birthdate,birthdateEstimated,age))';
+
+function parseLocalDate(dateStr: string): Date | null {
+  const datePart = dateStr.split('T')[0];
+  const parts = datePart.split('-');
+  if (parts.length !== 3) {
+    return null;
+  }
+  const [y, m, d] = parts.map(Number);
+  return new Date(y, m - 1, d);
+}
+
+export function computeEarliestAllowedStartDate(
+  birthdate: string | null,
+  birthdateEstimated: boolean,
+  age: number | null,
+): Date | null {
+  if (!birthdate) {
+    return null;
+  }
+
+  const earliest = parseLocalDate(birthdate);
+  if (!earliest) {
+    return null;
+  }
+
+  if (birthdateEstimated && age != null) {
+    const graceYears = Math.max(1, Math.floor(age * 0.5));
+    earliest.setFullYear(earliest.getFullYear() - graceYears);
+  }
+
+  return earliest;
+}
+
+export function useEarliestAllowedVisitStartDate(patientUuid: string) {
+  const { data, isLoading } = useSWRImmutable<FetchResponse<PatientPersonResponse>>(
+    `${restBaseUrl}/patient/${patientUuid}?v=${patientPersonCustomRep}`,
+    openmrsFetch,
+  );
+
+  const earliestAllowedStartDate = useMemo(() => {
+    if (!data?.data?.person) {
+      return null;
+    }
+    const { birthdate, birthdateEstimated, age } = data.data.person;
+    return computeEarliestAllowedStartDate(birthdate, birthdateEstimated, age);
+  }, [data]);
+
+  return { earliestAllowedStartDate, isLoading };
+}
+
+export function useAllowOverlappingVisits() {
+  const isOnline = useConnectivity();
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<{ value: string }>>(
+    isOnline ? `${restBaseUrl}/systemsetting/visits.allowOverlappingVisits?v=custom:(value)` : null,
+    openmrsFetch,
+  );
+  return {
+    allowOverlappingVisits: error || !data ? true : (data.data.value ?? 'true').toLowerCase() === 'true',
+    isLoading,
+  };
+}
+
+export interface VisitFormCallbacks {
+  onVisitCreatedOrUpdated: (visit: Visit) => Promise<any>;
+  /**
+   * Called BEFORE the visit is saved.
+   * Return true to proceed with saving, false to abort.
+   * Used by the SHA billing extension to launch the OTP modal before checkin.
+   */
+  onBeforeVisitSave?: () => Promise<boolean>;
+  /**
+   * When true, signals ExportedVisitForm to change the submit button label
+   * from "Start Visit" to "Send OTP & Start Visit".
+   */
+  isSHAVisit?: boolean;
+}
+
+export function useVisitFormCallbacks() {
+  return useState<Map<string, VisitFormCallbacks>>(new Map());
+}
+
+export function createVisitAttribute(visitUuid: string, attributeType: string, value: string) {
+  return openmrsFetch(`${restBaseUrl}/visit/${visitUuid}/attribute`, {
+    method: 'POST',
+    headers: { 'Content-type': 'application/json' },
+    body: { attributeType, value },
+  });
+}
+
+export function updateVisitAttribute(visitUuid: string, visitAttributeUuid: string, value: string) {
+  return openmrsFetch(`${restBaseUrl}/visit/${visitUuid}/attribute/${visitAttributeUuid}`, {
+    method: 'POST',
+    headers: { 'Content-type': 'application/json' },
+    body: { value },
+  });
+}
+
+export function deleteVisitAttribute(visitUuid: string, visitAttributeUuid: string) {
+  return openmrsFetch(`${restBaseUrl}/visit/${visitUuid}/attribute/${visitAttributeUuid}`, {
+    method: 'DELETE',
+  });
+}
+
+export function useVisitFormSchemaAndDefaultValues(
+  visitToEdit: Visit | undefined,
+  earliestAllowedStartDate?: Date | null,
+) {
+  const { t } = useTranslation();
+  const { visitAttributeTypes, restrictByVisitLocationTag } = useConfig<ExpressWorkflowConfig>();
+  const isEmrApiModuleInstalled = useFeatureFlag('emrapi-module');
+  const sessionUser = useSession();
+  const sessionLocation = sessionUser?.sessionLocation;
+  const defaultVisitLocation = useDefaultVisitLocation(
+    sessionLocation,
+    restrictByVisitLocationTag && isEmrApiModuleInstalled,
+  );
+  const { emrConfiguration } = useEmrConfiguration();
+
+  return useMemo(() => {
+    const now = new Date();
+
+    const allEncounterDateTimes = (visitToEdit?.encounters ?? [])
+      .map(({ encounterDatetime }) => (encounterDatetime ? Date.parse(encounterDatetime) : null))
+      .filter((t): t is number => t !== null);
+
+    const firstEncounterDateTime: number = allEncounterDateTimes.length ? Math.min(...allEncounterDateTimes) : Infinity;
+    const lastEncounterDateTime: number = allEncounterDateTimes.length ? Math.max(...allEncounterDateTimes) : -Infinity;
+
+    const startDateTime = convertToDateTimeFields(visitToEdit?.startDatetime ?? now);
+    const stopDateTime = convertToDateTimeFields(visitToEdit?.stopDatetime ?? now);
+
+    const visitStatus: VisitStatus =
+      visitToEdit == null ? 'new' : visitToEdit.stopDatetime === null ? 'ongoing' : 'past';
+
+    const defaultValues: Partial<VisitFormData> = {
+      visitStatus,
+      visitStartDate: startDateTime.date,
+      visitStartTime: startDateTime.time,
+      visitStartTimeFormat: startDateTime.timeFormat,
+      visitStopDate: stopDateTime.date,
+      visitStopTime: stopDateTime.time,
+      visitStopTimeFormat: stopDateTime.timeFormat,
+      visitType: visitToEdit?.visitType?.uuid ?? emrConfiguration?.atFacilityVisitType?.uuid,
+      visitLocation: visitToEdit?.location ?? defaultVisitLocation ?? {},
+      visitAttributes:
+        (visitToEdit?.attributes ?? []).reduce(
+          (acc, curr) => ({
+            ...acc,
+            [curr.attributeType.uuid]: typeof curr.value === 'object' ? curr?.value?.uuid : `${curr.value ?? ''}`,
+          }),
+          {},
+        ) ?? {},
+    };
+
+    const visitAttributes = (visitAttributeTypes ?? [])?.reduce(
+      (acc, { uuid, required }) => ({
+        ...acc,
+        [uuid]: required
+          ? z.string({ required_error: t('fieldRequired', 'This field is required') })
+          : z.string().optional(),
+      }),
+      {},
+    );
+
+    const visitStatusEnum = z.enum(visitStatuses);
+    const visitFormSchema = z
+      .object({
+        visitStatus: visitToEdit ? visitStatusEnum.exclude(['new']) : visitStatusEnum,
+        visitStartDate: z.date().optional(),
+        visitStartTime: z.string().regex(time12HourFormatRegex).optional(),
+        visitStartTimeFormat: z.enum(['PM', 'AM']).optional(),
+        visitStopDate: z.date().optional(),
+        visitStopTime: z.string().regex(time12HourFormatRegex).optional(),
+        visitStopTimeFormat: z.enum(['PM', 'AM']).optional(),
+        programType: z.string().optional(),
+        visitType: z.string({ required_error: t('visitTypeRequired', 'Visit type is required') }),
+        visitLocation: z.object({
+          display: z.string(),
+          uuid: z.string({ required_error: t('visitLocationRequired', 'Visit location is required') }),
+        }),
+        visitAttributes: z.object(visitAttributes),
+      })
+      .superRefine((data, ctx) => {
+        const {
+          visitStatus,
+          visitStartDate,
+          visitStartTime,
+          visitStartTimeFormat,
+          visitStopDate,
+          visitStopTime,
+          visitStopTimeFormat,
+        } = data;
+
+        const visitStartDateTime = visitStartDate
+          ? convertToDate(visitStartDate, visitStartTime ?? '', visitStartTimeFormat ?? 'AM')
+          : null;
+
+        const visitStopDateTime = visitStopDate
+          ? convertToDate(visitStopDate, visitStopTime ?? '', visitStopTimeFormat ?? 'AM')
+          : null;
+
+        if (visitStatus === 'ongoing' || visitStatus === 'past') {
+          if (visitStartDateTime === null) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: t('visitStartDateTimeRequired', 'Start date and time are required'),
+              path: ['visitStartDate'],
+            });
+          } else if (earliestAllowedStartDate && visitStartDateTime < earliestAllowedStartDate) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: t('visitStartDateBeforeBirthdate', "Start date cannot be before the patient's birth date"),
+              path: ['visitStartDate'],
+            });
+          } else if (visitStartDateTime > now) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: t('futureStartTime', 'Start time cannot be in the future'),
+              path: ['visitStartTime'],
+            });
+          } else if (visitStartDateTime.getTime() > firstEncounterDateTime) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: t(
+                'visitStartDateMustBeBeforeEarliestEncounter',
+                'Start time must be on or before {{firstEncounterDatetime}}',
+                {
+                  firstEncounterDatetime: new Date(firstEncounterDateTime).toLocaleString(),
+                  interpolation: { escapeValue: false },
+                },
+              ),
+              path: ['visitStartTime'],
+            });
+          }
+        }
+
+        if (visitStatus === 'past') {
+          if (visitStopDateTime === null) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: t('endDateTimeRequired', 'End date and time are required'),
+              path: ['visitStopDate'],
+            });
+          } else if (visitStopDateTime > now) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: t('futureEndTime', 'End time cannot be in the future'),
+              path: ['visitStopTime'],
+            });
+          } else if (visitStartDateTime && visitStopDateTime < visitStartDateTime) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: t('endTimeMustBeAfterStartTime', 'End time must be after start time'),
+              path: ['visitStopDate'],
+            });
+          } else if (visitStopDateTime.getTime() < lastEncounterDateTime) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: t(
+                'endTimeMustBeAfterMostRecentEncounter',
+                'End time must be on or after {{lastEncounterDatetime}}',
+                {
+                  lastEncounterDatetime: new Date(lastEncounterDateTime).toLocaleString(),
+                  interpolation: { escapeValue: false },
+                },
+              ),
+              path: ['visitStopTime'],
+            });
+          }
+        }
+      });
+
+    return { visitFormSchema, defaultValues, firstEncounterDateTime, lastEncounterDateTime };
+  }, [t, visitAttributeTypes, visitToEdit, defaultVisitLocation, emrConfiguration, earliestAllowedStartDate]);
+}
+
+export const convertToDate = (date: Date, time12h: string, timeFormat: amPm): Date | null => {
+  if (!date || !time12h || !timeFormat) {
+    return null;
+  }
+  const dateStr = dayjs(date).format('YYYY-MM-DD');
+  const ret = dayjs(`${dateStr} ${time12h} ${timeFormat}`, 'YYYY-MM-DD hh:mm A');
+  return ret.isValid() ? ret.toDate() : null;
+};
+
+export const convertToDateTimeFields = (dateTime: dayjs.ConfigType) => {
+  const dateTimeDayjs = dayjs(dateTime);
+  return {
+    date: dateTimeDayjs.startOf('day').toDate(),
+    time: dateTimeDayjs.format('hh:mm'),
+    timeFormat: dateTimeDayjs.format('A') as amPm,
+  };
+};

package/src/components/registration/start-visit-form/start-visit-workspace/visit-form.scss

@@ -0,0 +1,166 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  margin: layout.$spacing-05;
+  & section {
+    margin: layout.$spacing-03 0 layout.$spacing-03;
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.heading {
+  @include type.type-style('heading-03');
+  margin: layout.$spacing-05;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin: 0 0 layout.$spacing-03 0;
+}
+
+.dateTimeSection {
+  display: flex;
+  margin: layout.$spacing-05 0;
+  align-items: center;
+}
+
+.radioButton {
+  margin: layout.$spacing-05 0;
+}
+
+.headerGridRow {
+  border-bottom: 0.0625rem solid colors.$gray-20;
+  margin: 0;
+}
+
+.dataGridRow {
+  display: grid;
+  grid-template-columns: 50% 10% 1fr;
+  margin: layout.$spacing-03 layout.$spacing-05;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  height: 100%;
+}
+
+.buttonSet {
+  margin-top: auto;
+  justify-self: end;
+  margin-right: 3rem;
+}
+.button {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: white;
+}
+
+.desktop {
+  padding: 0;
+}
+
+@media screen and (max-width: 600px) {
+  .dateTimeSection {
+    flex-direction: column;
+  }
+}
+
+.inlineNotification {
+  width: 100%;
+  max-width: unset;
+  padding: '0';
+}
+
+.label {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .container {
+    & section {
+      display: flex;
+      gap: layout.$spacing-10;
+
+      .sectionTitle {
+        flex-basis: 30%;
+        min-width: 8rem;
+        text-align: left;
+      }
+
+      .sectionField {
+        flex-basis: 70%;
+      }
+    }
+  }
+
+  .form {
+    height: 100%;
+  }
+}
+
+.spinner {
+  &:global(.cds--inline-loading) {
+    min-height: layout.$spacing-05 !important;
+  }
+}
+
+.bodyShort02 {
+  @include type.type-style('body-compact-02');
+}
+
+.timePicker {
+  display: flex;
+  align-items: baseline;
+
+  :global(.cds--form-requirement) {
+    max-width: layout.$spacing-12;
+    max-height: 0 !important;
+  }
+}
+
+.timePickerSelectError {
+  outline: 2px solid colors.$red-50;
+  outline-offset: -2px;
+}
+
+.timerPickerError {
+  color: colors.$red-60;
+  display: flex;
+  align-self: flex-end;
+  max-width: layout.$spacing-11;
+  font-size: layout.$spacing-04;
+  margin: 0;
+  letter-spacing: 0.02rem;
+  line-height: 1.33333;
+}
+
+.timePickerContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.datePicker {
+  :global(.cds--date-picker-input__wrapper) {
+    inline-size: layout.$spacing-13;
+  }
+}

package/src/components/registration/start-visit-form/visit-form-workspace/visit-form.workspace.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { type KeyedMutator, useSWRConfig } from 'swr';
+import { launchWorkspaceGroup2, useVisit, type Visit } from '@openmrs/esm-framework';
+import {
+  invalidateVisitByUuid,
+  type PatientWorkspace2DefinitionProps,
+  usePatientChartStore,
+} from '@openmrs/esm-patient-common-lib';
+import ExportedVisitForm from '../start-visit-workspace/exported-visit-form.workspace';
+
+export interface VisitFormProps {
+  openedFrom: string;
+  showPatientHeader?: boolean;
+}
+
+const VisitForm: React.FC<PatientWorkspace2DefinitionProps<VisitFormProps, {}>> = ({
+  workspaceProps: { openedFrom, showPatientHeader = false },
+  groupProps: { patient, patientUuid, visitContext },
+  ...rest
+}) => {
+  const { mutate: mutateActiveVisit } = useVisit(patientUuid);
+  const { mutate: globalMutate } = useSWRConfig();
+  const boundMutate = globalMutate as unknown as KeyedMutator<unknown>;
+  const { setVisitContext } = usePatientChartStore(patientUuid);
+
+  const onVisitStarted = (visit: Visit) => {
+    const mutateSavedOrUpdatedVisit = () => invalidateVisitByUuid(boundMutate, visit.uuid);
+    mutateActiveVisit();
+    setVisitContext?.(visit, mutateSavedOrUpdatedVisit);
+
+    launchWorkspaceGroup2('ewf-patient-chart', {
+      patient,
+      patientUuid,
+      visitContext: visit,
+      mutateVisitContext: mutateSavedOrUpdatedVisit,
+    });
+  };
+
+  return (
+    <ExportedVisitForm
+      {...rest}
+      workspaceProps={{
+        openedFrom,
+        showPatientHeader,
+        onVisitStarted,
+        patient,
+        patientUuid,
+        visitContext,
+      }}
+      groupProps={{}}
+    />
+  );
+};
+
+export default VisitForm;

package/src/components/reports/index.ts

@@ -1,20 +1,21 @@
-import { getSyncLifecycle } from '@openmrs/esm-framework';
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
 import { moduleName } from '../../constants';
-import { createLeftPanelLink } from '../../shared/dashboard-link/dashboard-link.component';
-import ReportsDashboard from './dashboard.component';
 
 const options = {
   featureName: 'express-workflow',
   moduleName,
 };
 
-export const reportsDashboard = getSyncLifecycle(ReportsDashboard, options);
+export const reportsDashboard = getAsyncLifecycle(() => import('./dashboard.component'), options);
 // t('reports', 'Reports')
-export const reportsDashboardLink = getSyncLifecycle(
-  createLeftPanelLink({
-    name: 'reports',
-    title: 'reports',
-  }),
+export const reportsDashboardLink = getAsyncLifecycle(
+  () =>
+    import('../../shared/dashboard-link/dashboard-link.component').then((m) => ({
+      default: m.createLeftPanelLink({
+        name: 'reports',
+        title: 'reports',
+      }),
+    })),
   options,
 );

package/src/components/triage/dashboard.component.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { spaBasePath } from '../../constants';
-import PatientChart from '../../shared/patient-chart/patient-chart.component';
 import Triage from './triage.component';
 
 type TriageDashboardProps = {
@@ -13,7 +12,6 @@ const TriageDashboard: React.FC<TriageDashboardProps> = ({ dashboardTitle }) =>
     <BrowserRouter basename={`${spaBasePath}/triage`}>
       <Routes>
         <Route path="/" element={<Triage dashboardTitle={dashboardTitle} />} />
-        <Route path="/:patientUuid" element={<PatientChart navigationPath="triage" />} />
       </Routes>
     </BrowserRouter>
   );

package/src/components/triage/index.ts

@@ -1,20 +1,21 @@
-import { getSyncLifecycle } from '@openmrs/esm-framework';
+import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
 import { moduleName } from '../../constants';
-import { createLeftPanelLink } from '../../shared/dashboard-link/dashboard-link.component';
-import TriageDashboard from './dashboard.component';
 
 const options = {
   featureName: 'express-workflow',
   moduleName,
 };
 
-export const triageDashboard = getSyncLifecycle(TriageDashboard, options);
+export const triageDashboard = getAsyncLifecycle(() => import('./dashboard.component'), options);
 // t('triage', 'Triage')
-export const triageLeftPanelLink = getSyncLifecycle(
-  createLeftPanelLink({
-    name: 'triage',
-    title: 'triage',
-  }),
+export const triageLeftPanelLink = getAsyncLifecycle(
+  () =>
+    import('../../shared/dashboard-link/dashboard-link.component').then((m) => ({
+      default: m.createLeftPanelLink({
+        name: 'triage',
+        title: 'triage',
+      }),
+    })),
   options,
 );