@kenyaemr/esm-care-panel-app 5.4.2-pre.2777 → 5.4.2-pre.2788

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[],"extensions":[{"name":"care-panel-patient-summary","component":"carePanelPatientSummary","slot":"patient-chart-care-panel-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"care-panel-summary-dashboard-link","component":"carePanelSummaryDashboardLink","order":3,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-care-panel-dashboard-slot","layoutMode":"anchored","path":"Care panel"}},{"name":"delete-regimen-confirmation-dialog","component":"deleteRegimenConfirmationDialog"},{"name":"hiv-patient-visit-summary-dashboard-link","component":"hivPatientSummaryDashboardLink","slot":"hiv-care-and-treatment-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-hiv-patient-summary-slot","path":"HIV Patient Summary","layoutMode":"anchored"}},{"name":"hiv-patient-visit-summary","slot":"hiv-patient-summary-slot","component":"hivPatientSummary","order":3,"online":true,"offline":false},{"name":"dispensing-patient-vitals","component":"dispensingPaentientVitals","slot":"dispensing-condition-and-diagnoses","order":1,"online":true,"offline":true},{"name":"patient-discharge-side-rail-icon","component":"patientDischargeSideRailIcon","slot":"action-menu-ward-patient-items-slot"}],"workspaces":[{"name":"patient-regimen-workspace","title":"Patient Regimen","component":"regimenFormWorkspace","type":"form","canMaximize":true,"canHide":true,"width":"wider"},{"name":"patient-care-discharge-workspace","title":"Patient Discharge","component":"patientDischargeWorkspace","type":"workspace","canMaximize":true,"canHide":true,"width":"extra-wide","groups":["ward-patient"]},{"name":"mch-program-form-workspace","component":"mchProgramForm","title":"Program Form","type":"workspace"}],"version":"5.4.2-pre.2777"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[],"extensions":[{"name":"care-panel-patient-summary","component":"carePanelPatientSummary","slot":"patient-chart-care-panel-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"care-panel-summary-dashboard-link","component":"carePanelSummaryDashboardLink","order":3,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-care-panel-dashboard-slot","layoutMode":"anchored","path":"Care panel"}},{"name":"delete-regimen-confirmation-dialog","component":"deleteRegimenConfirmationDialog"},{"name":"hiv-patient-visit-summary-dashboard-link","component":"hivPatientSummaryDashboardLink","slot":"hiv-care-and-treatment-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-hiv-patient-summary-slot","path":"HIV Patient Summary","layoutMode":"anchored"}},{"name":"hiv-patient-visit-summary","slot":"hiv-patient-summary-slot","component":"hivPatientSummary","order":3,"online":true,"offline":false},{"name":"dispensing-patient-vitals","component":"dispensingPaentientVitals","slot":"dispensing-condition-and-diagnoses","order":1,"online":true,"offline":true},{"name":"patient-discharge-side-rail-icon","component":"patientDischargeSideRailIcon","slot":"action-menu-ward-patient-items-slot"}],"workspaces":[{"name":"patient-regimen-workspace","title":"Patient Regimen","component":"regimenFormWorkspace","type":"form","canMaximize":true,"canHide":true,"width":"wider"},{"name":"patient-care-discharge-workspace","title":"Patient Discharge","component":"patientDischargeWorkspace","type":"workspace","canMaximize":true,"canHide":true,"width":"extra-wide","groups":["ward-patient"]},{"name":"mch-program-form-workspace","component":"mchProgramForm","title":"Program Form","type":"workspace"},{"name":"kvp-peer-linkage-form-workspace","component":"kvpPeerLinkageForm","title":"Program Form","type":"workspace"}],"version":"5.4.2-pre.2788"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-care-panel-app",
-  "version": "5.4.2-pre.2777",
+  "version": "5.4.2-pre.2788",
   "description": "Patient care panels microfrontend for the OpenMRS SPA",
   "keywords": [
     "openmrs"

package/src/care-programs/care-program.resource.ts

@@ -1,4 +1,12 @@
-import { FetchResponse, launchWorkspace, openmrsFetch, restBaseUrl, showModal } from '@openmrs/esm-framework';
+import {
+  FetchResponse,
+  launchWorkspace,
+  openmrsFetch,
+  parseDate,
+  restBaseUrl,
+  showModal,
+} from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
 import useSWR, { mutate } from 'swr';
 import z from 'zod';
 
@@ -81,6 +89,66 @@ export const useProgramDetail = (programId: string) => {
   };
 };
 
+type FormEncounter = {
+  encounter: {
+    encounterDatetime: string;
+    uuid: string;
+    id: number;
+    encounterType: string;
+    dateCreated: string;
+  };
+  form: {
+    uuid: string;
+    name: string;
+  };
+};
+
+export const usePatientFormEncounter = (patientUuid: string, formUuid: string) => {
+  const url = `${restBaseUrl}/kenyaemr/encountersByPatientAndForm?patientUuid=${patientUuid}&formUuid=${formUuid}`;
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<{ results: Array<FormEncounter> }>>(
+    url,
+    openmrsFetch,
+  );
+  return {
+    formEncounters: (data?.data?.results ?? [])
+      .map((data) => ({
+        ...data,
+        encounter: {
+          ...data.encounter,
+          encounterDatetime: parseDate(data.encounter.encounterDatetime),
+        },
+      }))
+      .sort((a, b) => dayjs(b.encounter.encounterDatetime).diff(dayjs(a.encounter.encounterDatetime))),
+    error,
+    isLoading,
+    mutate,
+  };
+};
+
+export const useFormsFilled = (patientUuid: string, formUuids: Array<string> = []) => {
+  const url = `${restBaseUrl}/kenyaemr/encountersByPatientAndForm?patientUuid=${patientUuid}&formUuid=${formUuids.join(
+    ',',
+  )}`;
+
+  const { data, error, mutate, isLoading } = useSWR(url, async (uri) => {
+    const tasks = await Promise.allSettled(
+      formUuids.map((formUuid) =>
+        openmrsFetch<{ results: Array<FormEncounter> }>(
+          `${restBaseUrl}/kenyaemr/encountersByPatientAndForm?patientUuid=${patientUuid}&formUuid=${formUuid}`,
+        ),
+      ),
+    );
+    // Return true if all tasks are fullfilled and have related encounter (visit doesnt matter)
+    return tasks.every((task) => task.status === 'fulfilled' && task.value.data?.results?.length);
+  });
+  return {
+    formsFilled: data,
+    isLoading,
+    mutate,
+    error,
+  };
+};
+
 export const ProgramFormSchema = z.object({
   dateEnrolled: z.date({ coerce: true }),
   dateCompleted: z.date({ coerce: true }).optional(),

package/src/care-programs/care-programs.component.tsx

@@ -16,7 +16,7 @@ import {
   Tile,
 } from '@carbon/react';
 import { Close, DocumentAdd } from '@carbon/react/icons';
-import { formatDate, launchWorkspace, restBaseUrl, useLayoutType, useVisit } from '@openmrs/esm-framework';
+import { formatDate, launchWorkspace, restBaseUrl, useConfig, useLayoutType, useVisit } from '@openmrs/esm-framework';
 import { CardHeader, EmptyState, ErrorState, launchStartVisitPrompt } from '@openmrs/esm-patient-common-lib';
 import capitalize from 'lodash/capitalize';
 import React, { useCallback, useMemo } from 'react';
@@ -24,8 +24,10 @@ import { useTranslation } from 'react-i18next';
 import { mutate } from 'swr';
 import { PatientCarePrograms, useCarePrograms } from '../hooks/useCarePrograms';
 
+import { CarePanelConfig } from '../config-schema';
 import { launchDeleteProgramDialog, launchProgramForm, usePatientEnrolledPrograms } from './care-program.resource';
 import styles from './care-programs.scss';
+import ProgramFormOverflowMenuItem from './program-form-overflow-menu-item.component';
 import useCareProgramForms from './useCareProgramForms';
 
 type CareProgramsProps = {
@@ -34,8 +36,9 @@ type CareProgramsProps = {
 
 const CarePrograms: React.FC<CareProgramsProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
-  const { getProgramForms } = useCareProgramForms();
-  const { currentVisit } = useVisit(patientUuid);
+  const { peerCalendarOutreactForm } = useConfig<CarePanelConfig>();
+  const { getProgramForms, getProgramEnrollmentForm } = useCareProgramForms();
+  const { currentVisit, mutate: mutateVisit } = useVisit(patientUuid);
   const { eligibleCarePrograms, isLoading, isValidating, error, mutateEligiblePrograms } = useCarePrograms(patientUuid);
   const {
     enrollments,
@@ -43,6 +46,7 @@ const CarePrograms: React.FC<CareProgramsProps> = ({ patientUuid }) => {
     error: enrollmentsError,
     mutate: mutateEnrollments,
   } = usePatientEnrolledPrograms(patientUuid);
+
   const isTablet = useLayoutType() === 'tablet';
 
   const handleMutations = useCallback(() => {
@@ -58,7 +62,9 @@ const CarePrograms: React.FC<CareProgramsProps> = ({ patientUuid }) => {
       undefined,
       { revalidate: true },
     );
-  }, [mutateEligiblePrograms, patientUuid]);
+    mutateVisit();
+    mutateEnrollments();
+  }, [mutateEligiblePrograms, mutateEnrollments, mutateVisit, patientUuid]);
 
   const handleCareProgramClick = useCallback(
     (careProgram: PatientCarePrograms) => {
@@ -72,9 +78,7 @@ const CarePrograms: React.FC<CareProgramsProps> = ({ patientUuid }) => {
       currentVisit
         ? launchWorkspace('patient-form-entry-workspace', {
             workspaceTitle: workspaceTitle,
-            mutateForm: () => {
-              handleMutations();
-            },
+            mutateForm: handleMutations,
             formInfo: {
               encounterUuid: '',
               formUuid,
@@ -89,8 +93,7 @@ const CarePrograms: React.FC<CareProgramsProps> = ({ patientUuid }) => {
   const rows = useMemo(
     () => [
       ...enrollments.map((enrollment) => {
-        const forms = getProgramForms(enrollment.program.uuid);
-
+        const forms = getProgramForms(enrollment.program.uuid).filter((form) => !form.isEnrollment);
         return {
           id: enrollment.program.uuid,
           programName: enrollment.program.name,
@@ -99,37 +102,12 @@ const CarePrograms: React.FC<CareProgramsProps> = ({ patientUuid }) => {
               <Tag type="green">Enrolled</Tag>
               <OverflowMenu aria-label="overflow-menu" flipped>
                 {forms.map((form) => {
-                  const formEncounter = currentVisit?.encounters?.find((en) => en.form?.uuid === form.formUuId);
-                  const areAllDependancyFormsFilled = form.dependancies.every((formUuid) =>
-                    currentVisit?.encounters?.some((en) => en?.form?.uuid === formUuid),
-                  );
-                  const showForm = !form?.dependancies?.length || areAllDependancyFormsFilled;
-
-                  if (!showForm) {
-                    return null;
-                  }
-
                   return (
-                    <OverflowMenuItem
-                      key={form.formUuId}
-                      itemText={form.formName}
-                      onClick={() => {
-                        if (currentVisit) {
-                          return launchWorkspace('patient-form-entry-workspace', {
-                            workspaceTitle: form.formName,
-                            mutateForm: () => {
-                              mutateEnrollments();
-                              mutateEligiblePrograms();
-                            },
-                            formInfo: {
-                              encounterUuid: formEncounter?.uuid ?? '',
-                              formUuid: form.formUuId,
-                              // additionalProps: { enrollmenrDetails: careProgram.enrollmentDetails ?? {} },
-                            },
-                          });
-                        }
-                        launchStartVisitPrompt();
-                      }}
+                    <ProgramFormOverflowMenuItem
+                      form={form}
+                      visit={currentVisit}
+                      patientUuid={patientUuid}
+                      mutate={handleMutations}
                     />
                   );
                 })}
@@ -149,6 +127,8 @@ const CarePrograms: React.FC<CareProgramsProps> = ({ patientUuid }) => {
         };
       }),
       ...eligibleCarePrograms.map((careProgram) => {
+        const enrollmentForm = getProgramEnrollmentForm(careProgram.uuid);
+
         return {
           id: `${careProgram.uuid}`,
           programName: careProgram.display,
@@ -169,12 +149,28 @@ const CarePrograms: React.FC<CareProgramsProps> = ({ patientUuid }) => {
                 kind={careProgram.enrollmentStatus == 'active' ? 'danger--ghost' : 'ghost'}
                 iconDescription="Dismiss"
                 // onClick={() => handleCareProgramClick(careProgram)}
-                onClick={() =>
-                  launchProgramForm(careProgram.uuid, patientUuid, undefined, () => {
-                    mutateEnrollments();
-                    mutateEligiblePrograms();
-                  })
-                }
+                onClick={() => {
+                  if (!enrollmentForm) {
+                    return launchProgramForm(careProgram.uuid, patientUuid, undefined, () => {
+                      mutateEnrollments();
+                      mutateEligiblePrograms();
+                    });
+                  }
+                  if (currentVisit) {
+                    if (enrollmentForm) {
+                      return launchWorkspace('patient-form-entry-workspace', {
+                        workspaceTitle: enrollmentForm.formName,
+                        mutateForm: handleMutations,
+                        formInfo: {
+                          encounterUuid: '',
+                          formUuid: enrollmentForm.formUuId,
+                          // additionalProps: { enrollmenrDetails: careProgram.enrollmentDetails ?? {} },
+                        },
+                      });
+                    }
+                  }
+                  launchStartVisitPrompt();
+                }}
                 renderIcon={careProgram.enrollmentStatus == 'active' ? Close : DocumentAdd}>
                 {careProgram.enrollmentStatus == 'active' ? 'Discontinue' : 'Enroll'}
               </Button>
@@ -189,9 +185,11 @@ const CarePrograms: React.FC<CareProgramsProps> = ({ patientUuid }) => {
       getProgramForms,
       t,
       currentVisit,
+      patientUuid,
+      handleMutations,
       mutateEnrollments,
+      getProgramEnrollmentForm,
       mutateEligiblePrograms,
-      patientUuid,
     ],
   );
 

package/src/care-programs/kvp-patient-peer-form.scss

@@ -0,0 +1,36 @@
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
+
+.grid {
+  margin: layout.$spacing-05 layout.$spacing-05;
+  padding: layout.$spacing-05 0 0 0;
+}
+
+.button {
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.buttonSet {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.datePickerInput span,
+.datePickerInput div,
+.datePickerInput input,
+.datePickerInput {
+  min-width: 100%;
+}

package/src/care-programs/kvp-peer-linkage-form.workspace.tsx

@@ -0,0 +1,183 @@
+import z from 'zod';
+import styles from './kvp-patient-peer-form.scss';
+import {
+  Button,
+  ButtonSet,
+  Column,
+  ComboBox,
+  DatePicker,
+  DatePickerInput,
+  Form,
+  Stack,
+  TextInput,
+} from '@carbon/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ConfigObject, DefaultWorkspaceProps, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import toUpper from 'lodash/toUpper';
+import React, { FC } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import {
+  extractNameString,
+  saveRelationship,
+  usePatientActivePeerEducator,
+  usePeerEducators,
+  usePerson,
+} from './kvp-program-actions.resource';
+
+export const formSchema = z.object({
+  personA: z.string().uuid('Invalid person'),
+  personB: z.string().uuid('Invalid person').optional(),
+  relationshipType: z.string().uuid(),
+  startDate: z.date({ coerce: true }),
+  endDate: z.date({ coerce: true }).optional(),
+});
+type FormType = z.infer<typeof formSchema>;
+type KvpPeerLinkageFormProps = DefaultWorkspaceProps & { patientUuid: string };
+
+const KvpPeerLinkageForm: FC<KvpPeerLinkageFormProps> = ({ closeWorkspace, patientUuid }) => {
+  const { data } = usePeerEducators();
+  const { isLoading, person } = usePerson(patientUuid);
+  const { caseManagerRelationshipType } = useConfig<ConfigObject>();
+  const { mutate } = usePatientActivePeerEducator(patientUuid);
+  const { t } = useTranslation();
+  const caseManagers =
+    data?.data.results.map((manager) => ({
+      id: manager.person.uuid,
+      text: manager.display,
+    })) || [];
+
+  const form = useForm<FormType>({
+    mode: 'all',
+    defaultValues: {
+      personA: patientUuid,
+      personB: '',
+      relationshipType: caseManagerRelationshipType,
+    },
+    resolver: zodResolver(formSchema),
+  });
+
+  const onSubmit = async (values: FormType) => {
+    try {
+      await saveRelationship(values);
+      showSnackbar({
+        kind: 'success',
+        title: t('success', 'Success'),
+        subtitle: t('caseSavedSuccesfully', 'Case saved successfully'),
+        isLowContrast: true,
+      });
+      mutate();
+      closeWorkspace();
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('error', 'Error'),
+        subtitle: t('errorAddingCase', 'Error Adding patient case'),
+        isLowContrast: true,
+      });
+    }
+  };
+
+  return (
+    <Form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
+      <Stack gap={4} className={styles.grid}>
+        <Column>
+          <Controller
+            control={form.control}
+            name="startDate"
+            render={({ field, fieldState: { error } }) => (
+              <DatePicker
+                className={styles.datePickerInput}
+                dateFormat="d/m/Y"
+                datePickerType="single"
+                {...field}
+                onChange={([date]) => field.onChange(date)}
+                ref={undefined}
+                invalid={!!error?.message}
+                invalidText={error?.message}>
+                <DatePickerInput
+                  id={`startdate-input`}
+                  invalid={!!error?.message}
+                  invalidText={error?.message}
+                  placeholder="mm/dd/yyyy"
+                  labelText={t('startDate', 'Start Date')}
+                  size="lg"
+                />
+              </DatePicker>
+            )}
+          />
+        </Column>
+        <Column>
+          <Controller
+            control={form.control}
+            name="endDate"
+            render={({ field, fieldState: { error } }) => (
+              <DatePicker
+                className={styles.datePickerInput}
+                dateFormat="d/m/Y"
+                datePickerType="single"
+                {...field}
+                onChange={([date]) => field.onChange(date)}
+                invalid={!!error?.message}
+                invalidText={error?.message}>
+                <DatePickerInput
+                  id="endDate"
+                  invalid={!!error?.message}
+                  invalidText={error?.message}
+                  placeholder="mm/dd/yyyy"
+                  labelText={t('endDate', 'End Date')}
+                  size="lg"
+                />
+              </DatePicker>
+            )}
+          />
+        </Column>
+        <Column>
+          <TextInput id="patient" labelText={t('patient', 'Patient')} value={person?.display} readOnly />
+        </Column>
+        <Column>
+          <Controller
+            name="personB"
+            control={form.control}
+            render={({ field, fieldState }) => {
+              return (
+                <ComboBox
+                  id="case_manager_name"
+                  titleText={t('manager', 'Case Manager')}
+                  placeholder="Select Case Manager"
+                  items={caseManagers}
+                  itemToString={(item) => toUpper(extractNameString(item ? item.text : ''))}
+                  onChange={(e) => {
+                    field.onChange(e.selectedItem?.id);
+                  }}
+                  selectedItem={caseManagers.find((manager) => manager.id === field.value)}
+                  invalid={!!fieldState.error}
+                  invalidText={fieldState.error?.message}
+                />
+              );
+            }}
+          />
+        </Column>
+        <Column>
+          <TextInput
+            id="relationshipType"
+            labelText={t('relationshipType', 'Relationship to patient')}
+            value={t('caseManager', 'Case Manager')}
+            readOnly
+          />
+        </Column>
+      </Stack>
+
+      <ButtonSet className={styles.buttonSet}>
+        <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>
+          {t('submit', 'Submit')}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default KvpPeerLinkageForm;

package/src/care-programs/kvp-program-actions.resource.ts

@@ -0,0 +1,91 @@
+import { FetchResponse, openmrsFetch, Patient, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { CarePanelConfig } from '../config-schema';
+import useSWR from 'swr';
+import { useMemo } from 'react';
+import dayjs from 'dayjs';
+import useSWRImmutable from 'swr/immutable';
+
+type Relationship = {
+  display: string;
+  uuid: string;
+  personA: {
+    uuid: string;
+    display: string;
+  };
+  personB: {
+    uuid: string;
+    display: string;
+  };
+  startDate: string;
+  endDate: string;
+  relationshipType: {
+    uuid: string;
+    display: string;
+  };
+};
+
+interface PeerEducator {
+  uuid: string;
+  display: string;
+  person: {
+    uuid: string;
+  };
+}
+
+export const usePatientActivePeerEducator = (patientUuid: string) => {
+  const { peerEducatorRelationshipType } = useConfig<CarePanelConfig>();
+  const rep =
+    'custom:(display,uuid,personA:(uuid,display),personB:(uuid,display),startDate,endDate,relationshipType:(uuid,display))';
+  const url = `${restBaseUrl}/relationship?person=${patientUuid}&v=${rep}`;
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<{ results: Array<Relationship> }>>(url, openmrsFetch);
+  const activePeer = useMemo(
+    () =>
+      (data?.data?.results ?? []).filter(
+        (rel) =>
+          rel.relationshipType.uuid === peerEducatorRelationshipType &&
+          (!rel.endDate || dayjs(rel.endDate).isAfter(dayjs())),
+      ),
+    [data, peerEducatorRelationshipType],
+  );
+  return {
+    activePeer,
+    isLoading,
+    mutate,
+    error,
+  };
+};
+
+export const usePeerEducators = () => {
+  const customRepresentation = 'custom:(uuid,display,person:(uuid))';
+  const url = `/ws/rest/v1/provider?v=${customRepresentation}`;
+  const { data, error } = useSWRImmutable<FetchResponse<{ results: Array<PeerEducator> }>>(url, openmrsFetch);
+
+  return { data, error };
+};
+
+export const saveRelationship = (payload) => {
+  const url = `/ws/rest/v1/relationship`;
+  return openmrsFetch(url, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+export const usePerson = (uuid: string) => {
+  const customRepresentation = `custom:(uuid,display,gender,birthdate,dead,age,deathDate,causeOfDeath:(uuid,display),attributes:(uuid,display,value,attributeType:(uuid,display)))`;
+  const url = `${restBaseUrl}/person/${uuid}?v=${customRepresentation}`;
+  const { isLoading, error, data } = useSWR<FetchResponse<Patient['person']>>(url, openmrsFetch);
+  const person = data?.data;
+  return { isLoading, error, person };
+};
+
+export function extractNameString(formattedString: string) {
+  if (!formattedString) {
+    return '';
+  }
+  const parts = formattedString.split(' - ');
+  return parts.length > 1 ? parts[1] : '';
+}

package/src/care-programs/link-patient-to-peer-action.component.tsx

@@ -0,0 +1,70 @@
+import React, { FC } from 'react';
+import { usePatientActivePeerEducator } from './kvp-program-actions.resource';
+import { useTranslation } from 'react-i18next';
+import { InlineLoading, OverflowMenuItem } from '@carbon/react';
+import { launchWorkspace, useConfig, Visit } from '@openmrs/esm-framework';
+import { CarePanelConfig } from '../config-schema';
+import { launchStartVisitPrompt } from '@openmrs/esm-patient-common-lib';
+
+type KvpLinkPatientToPeerEducatorProps = {
+  patientUuid: string;
+  form: CarePanelConfig['careProgramForms'][0]['forms'][0];
+  visit?: Visit;
+  mutate?: () => void;
+};
+const KvpLinkPatientToPeerEducator: FC<KvpLinkPatientToPeerEducatorProps> = ({
+  patientUuid,
+  form,
+  visit: currentVisit,
+  mutate,
+}) => {
+  const { activePeer, error, isLoading } = usePatientActivePeerEducator(patientUuid);
+  const { hideFilledProgramForm } = useConfig<CarePanelConfig>();
+  const { t } = useTranslation();
+  const formEncounter = currentVisit?.encounters?.find((en) => en.form?.uuid === form.formUuId);
+
+  if (isLoading) {
+    return <InlineLoading />;
+  }
+
+  if (!activePeer.length) {
+    return (
+      <OverflowMenuItem
+        itemText={t('linkToPeerEducator', 'Link to peer Educator')}
+        onClick={() => {
+          launchWorkspace('kvp-peer-linkage-form-workspace', {
+            workspaceTitle: t('linkPatientToPeerEducator', 'Link Patient to Peer Educator'),
+            patientUuid,
+          });
+        }}
+      />
+    );
+  }
+
+  if (hideFilledProgramForm && formEncounter) {
+    return null;
+  }
+
+  return (
+    <OverflowMenuItem
+      key={form.formUuId}
+      itemText={form.formName}
+      onClick={() => {
+        if (currentVisit) {
+          return launchWorkspace('patient-form-entry-workspace', {
+            workspaceTitle: form.formName,
+            mutateForm: mutate,
+            formInfo: {
+              encounterUuid: formEncounter?.uuid ?? '',
+              formUuid: form.formUuId,
+              // additionalProps: { enrollmenrDetails: careProgram.enrollmentDetails ?? {} },
+            },
+          });
+        }
+        launchStartVisitPrompt();
+      }}
+    />
+  );
+};
+
+export default KvpLinkPatientToPeerEducator;