@kenyaemr/esm-care-panel-app 5.4.2-pre.2599 → 5.4.2-pre.2606

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"]}],"version":"5.4.2-pre.2599"}
+{"$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.2606"}

package/package.json

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

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

@@ -0,0 +1,211 @@
+import { FetchResponse, launchWorkspace, openmrsFetch, restBaseUrl, showModal } from '@openmrs/esm-framework';
+import useSWR, { mutate } from 'swr';
+import z from 'zod';
+
+export interface Enrollement {
+  uuid: string;
+  display: string;
+  program: Program;
+  dateEnrolled: string;
+  dateCompleted?: string;
+  location: Location;
+  states: Array<ProgramWorkflowState>;
+}
+
+export interface Program {
+  display: string;
+  name: string;
+  uuid: string;
+  retired: boolean;
+  description: string;
+  concept: Concept;
+  allWorkflows: any[];
+  outcomesConcept: any;
+  resourceVersion: string;
+}
+
+export interface Concept {
+  uuid: string;
+  display: string;
+}
+
+export interface Location {
+  uuid: string;
+  display: string;
+}
+
+export interface ProgramWorkflowState {
+  state: {
+    uuid: string;
+    concept: Concept;
+  };
+  startDate: string;
+  endDate: string;
+  voided: boolean;
+}
+
+const programForms = [
+  {
+    programName: 'PNC',
+    programUuid: '286598d5-1886-4f0d-9e5f-fa5473399cee',
+    forms: [
+      { formName: 'MCH Postnatal Visit Form', formUuId: '72aa78e0-ee4b-47c3-9073-26f3b9ecc4a7' },
+      { formName: 'PNC Services Discontinuation', formUuId: '30db888b-d6d3-47fb-b0c9-dbdf10a57ff5' },
+    ],
+  },
+  {
+    programName: 'MCH - Child Services',
+    programUuid: 'c2ecdf11-97cd-432a-a971-cfd9bd296b83',
+    forms: [
+      { formName: 'Child welafare clinic form', formUuId: '755b59e6-acbb-4853-abaf-be302039f902' },
+      { formName: 'MCH Postnatal Visit Form', formUuId: '72aa78e0-ee4b-47c3-9073-26f3b9ecc4a7' },
+    ],
+  },
+  {
+    programName: 'Nutrition',
+    programUuid: '504f179b-4a13-4790-9ecd-ca4963448af8',
+    forms: [
+      { formName: 'Nutrition form', formUuId: 'b8357314-0f6a-4fc9-a5b7-339f47095d62' },
+      { formName: 'Nutrition Services Discontinuation', formUuId: '0648a046-f404-4246-806f-c9ee78232d6d' },
+    ],
+  },
+  {
+    programName: 'Family Planning',
+    programUuid: '191269d2-9973-4958-9936-f687ed771050',
+    forms: [
+      { formName: 'Family Planning Form', formUuId: 'a52c57d4-110f-4879-82ae-907b0d90add6' },
+      { formName: 'Family Planning Discontinuation', formUuId: 'efc782ea-9a16-4791-824a-18be7417eda4' },
+    ],
+  },
+  // { // TODO Uncomment and add conrect uuids after program is added by the BA
+  //   programName: 'Pre-Conception care program',
+  //   programUuid: '191269d2-9973-4958-9936-f687ed771050',
+  //   forms: [
+  //     { formName: 'Family Planning Form', formUuId: 'a52c57d4-110f-4879-82ae-907b0d90add6' },
+  //     { formName: 'Family Planning Discontinuation', formUuId: 'efc782ea-9a16-4791-824a-18be7417eda4' },
+  //   ],
+  // },
+];
+
+export const getProgramForms = (programUuid: string) => {
+  const program = programForms.find((p) => p.programUuid === programUuid);
+  if (!program) {
+    return [];
+  }
+  return program.forms;
+};
+
+export const usePrograms = () => {
+  const rep = 'custom:(uuid,display,name,allWorkflows,concept:(uuid,display))';
+  const url = `${restBaseUrl}/program?v=${rep}`;
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<{ results: Array<Program> }>>(url, openmrsFetch);
+  return {
+    isLoading,
+    error,
+    programs: data?.data?.results ?? [],
+    mutate,
+  };
+};
+
+export const usePatientEnrolledPrograms = (patientUuid: string) => {
+  const customRepresentation = `custom:(uuid,display,program,dateEnrolled,dateCompleted,location:(uuid,display),states:(startDate,endDate,voided,state:(uuid,concept:(display))))`;
+
+  const url = `${restBaseUrl}/programenrollment?patient=${patientUuid}&v=${customRepresentation}`;
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<{ results: Array<Enrollement> }>>(url, openmrsFetch);
+  return {
+    isLoading,
+    error,
+    enrollments: data?.data?.results ?? [],
+    mutate,
+  };
+};
+
+export const useProgramDetail = (programId: string) => {
+  const rep = 'custom:(uuid,display,name,allWorkflows,concept:(uuid,display))';
+  const url = `${restBaseUrl}/program/${programId}?v=${rep}`;
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<Program>>(url, openmrsFetch);
+  return {
+    isLoading,
+    error,
+    program: data?.data,
+    mutate,
+  };
+};
+
+export const ProgramFormSchema = z.object({
+  dateEnrolled: z.date({ coerce: true }),
+  dateCompleted: z.date({ coerce: true }).optional(),
+  location: z.string().nonempty(),
+});
+
+export type ProgramFormData = z.infer<typeof ProgramFormSchema>;
+
+export const mutateEnrollments = (patientUuid: string) =>
+  mutate((key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/programenrollment?patient=${patientUuid}`));
+
+export function createProgramEnrollment(
+  program: Program,
+  patientUuid: string,
+  payload: ProgramFormData,
+  abortController: AbortController,
+) {
+  const { dateEnrolled, dateCompleted, location } = payload;
+  return openmrsFetch(`${restBaseUrl}/programenrollment`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: { program, patient: patientUuid, dateEnrolled, dateCompleted, location },
+    signal: abortController.signal,
+  });
+}
+
+export function updateProgramEnrollment(
+  programEnrollmentUuid: string,
+  payload: ProgramFormData,
+  abortController: AbortController,
+) {
+  const { dateEnrolled, dateCompleted, location } = payload;
+  return openmrsFetch(`${restBaseUrl}/programenrollment/${programEnrollmentUuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: { dateEnrolled, dateCompleted, location },
+    signal: abortController.signal,
+  });
+}
+
+export const findLastState = (states: ProgramWorkflowState[]): ProgramWorkflowState => {
+  const activeStates = states.filter((state) => !state.voided);
+  const ongoingState = activeStates.find((state) => !state.endDate);
+
+  if (ongoingState) {
+    return ongoingState;
+  }
+
+  return activeStates.sort((a, b) => new Date(b.endDate).getTime() - new Date(a.endDate).getTime())[0];
+};
+
+export const launchDeleteProgramDialog = (programEnrollmentId: string, patientUuid: string) => {
+  const dispose = showModal('program-delete-confirmation-modal', {
+    closeDeleteModal: () => dispose(),
+    programEnrollmentId,
+    patientUuid,
+    size: 'sm',
+  });
+};
+
+export const launchProgramForm = (
+  programUuid: string,
+  patientUuid: string,
+  enrollment: Enrollement | undefined,
+  onSuccess?: () => void,
+) => {
+  launchWorkspace('mch-program-form-workspace', {
+    enrollment,
+    patientUuid,
+    programUuid,
+    onSubmitSuccess: onSuccess,
+  });
+};

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

@@ -1,26 +1,35 @@
-import React, { useCallback, useMemo } from 'react';
 import {
-  InlineLoading,
   Button,
   DataTable,
+  DataTableSkeleton,
+  InlineLoading,
+  OverflowMenu,
+  OverflowMenuItem,
   Table,
-  TableHeader,
-  TableRow,
-  TableHead,
   TableBody,
   TableCell,
   TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
   Tile,
-  DataTableSkeleton,
 } from '@carbon/react';
 import { Close, DocumentAdd } from '@carbon/react/icons';
-import { CardHeader, EmptyState, launchStartVisitPrompt, ErrorState } from '@openmrs/esm-patient-common-lib';
-import { useTranslation } from 'react-i18next';
-import { PatientCarePrograms, useCarePrograms } from '../hooks/useCarePrograms';
 import { formatDate, launchWorkspace, restBaseUrl, 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';
+import { useTranslation } from 'react-i18next';
 import { mutate } from 'swr';
+import { PatientCarePrograms, useCarePrograms } from '../hooks/useCarePrograms';
 
+import {
+  getProgramForms,
+  launchDeleteProgramDialog,
+  launchProgramForm,
+  usePatientEnrolledPrograms,
+} from './care-program.resource';
 import styles from './care-programs.scss';
 
 type CareProgramsProps = {
@@ -30,7 +39,13 @@ type CareProgramsProps = {
 const CarePrograms: React.FC<CareProgramsProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
   const { currentVisit } = useVisit(patientUuid);
-  const { carePrograms, isLoading, isValidating, error, mutateEligiblePrograms } = useCarePrograms(patientUuid);
+  const { eligibleCarePrograms, isLoading, isValidating, error, mutateEligiblePrograms } = useCarePrograms(patientUuid);
+  const {
+    enrollments,
+    isLoading: isLoadingEnrollments,
+    error: enrollmentsError,
+    mutate: mutateEnrollments,
+  } = usePatientEnrolledPrograms(patientUuid);
   const isTablet = useLayoutType() === 'tablet';
 
   const handleMutations = useCallback(() => {
@@ -75,8 +90,55 @@ const CarePrograms: React.FC<CareProgramsProps> = ({ patientUuid }) => {
   );
 
   const rows = useMemo(
-    () =>
-      carePrograms.map((careProgram) => {
+    () => [
+      ...enrollments.map((enrollment) => {
+        const forms = getProgramForms(enrollment.program.uuid);
+
+        return {
+          id: enrollment.program.uuid,
+          programName: enrollment.program.name,
+          status: (
+            <div className={styles.careProgramButtonContainer}>
+              <Tag type="green">Enrolled</Tag>
+              <OverflowMenu aria-label="overflow-menu" flipped>
+                {forms.map((form) => (
+                  <OverflowMenuItem
+                    key={form.formUuId}
+                    itemText={form.formName}
+                    onClick={() => {
+                      currentVisit
+                        ? launchWorkspace('patient-form-entry-workspace', {
+                            workspaceTitle: form.formName,
+                            mutateForm: () => {
+                              mutateEnrollments();
+                              mutateEligiblePrograms();
+                            },
+                            formInfo: {
+                              encounterUuid: '',
+                              formUuid: form.formUuId,
+                              // additionalProps: { enrollmenrDetails: careProgram.enrollmentDetails ?? {} },
+                            },
+                          })
+                        : launchStartVisitPrompt();
+                    }}
+                  />
+                ))}
+                <OverflowMenuItem
+                  itemText={t('edit', 'Edit')}
+                  onClick={() =>
+                    launchProgramForm(enrollment.program.uuid, patientUuid, enrollment, () => mutateEnrollments())
+                  }
+                />
+                <OverflowMenuItem
+                  itemText={t('delete', 'Delete')}
+                  onClick={() => launchDeleteProgramDialog(enrollment.uuid, patientUuid)}
+                />
+              </OverflowMenu>
+            </div>
+          ),
+        };
+      }),
+      ...eligibleCarePrograms.map((careProgram) => {
         return {
           id: `${careProgram.uuid}`,
           programName: careProgram.display,
@@ -96,7 +158,13 @@ const CarePrograms: React.FC<CareProgramsProps> = ({ patientUuid }) => {
                 className="cds--btn--sm cds--layout--size-sm"
                 kind={careProgram.enrollmentStatus == 'active' ? 'danger--ghost' : 'ghost'}
                 iconDescription="Dismiss"
-                onClick={() => handleCareProgramClick(careProgram)}
+                // onClick={() => handleCareProgramClick(careProgram)}
+                onClick={() =>
+                  launchProgramForm(careProgram.uuid, patientUuid, undefined, () => {
+                    mutateEnrollments();
+                    mutateEligiblePrograms();
+                  })
+                }
                 renderIcon={careProgram.enrollmentStatus == 'active' ? Close : DocumentAdd}>
                 {careProgram.enrollmentStatus == 'active' ? 'Discontinue' : 'Enroll'}
               </Button>
@@ -104,7 +172,8 @@ const CarePrograms: React.FC<CareProgramsProps> = ({ patientUuid }) => {
           ),
         };
       }),
-    [carePrograms, handleCareProgramClick],
+    ],
+    [enrollments, eligibleCarePrograms, t, currentVisit, mutateEnrollments, patientUuid, mutateEligiblePrograms],
   );
 
   const headers = [
@@ -126,7 +195,7 @@ const CarePrograms: React.FC<CareProgramsProps> = ({ patientUuid }) => {
     return <ErrorState headerTitle={t('errorCarePrograms', 'Care programs')} error={error} />;
   }
 
-  if (carePrograms.length === 0) {
+  if (eligibleCarePrograms.length === 0) {
     return <EmptyState headerTitle={t('careProgram', 'Care program')} displayText={t('careProgram', 'care program')} />;
   }
 

package/src/care-programs/care-programs.scss

@@ -1,7 +1,6 @@
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/spacing';
+@use '@carbon/type';
+@use '@carbon/layout';
 @use '@carbon/colors';
-
 .careProgramButtonContainer {
   display: flex;
   justify-content: space-between;
@@ -12,3 +11,45 @@
 .container {
   border: 1px solid colors.$cool-gray-20;
 }
+
+.heading {
+  @include type.type-style('heading-compact-01');
+  margin: layout.$spacing-05 0 layout.$spacing-05;
+}
+
+.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%;
+}
+
+.sectionHeader {
+  @include type.type-style('heading-02');
+}
+
+.datePickerInput span,
+.datePickerInput div,
+.datePickerInput input,
+.datePickerInput {
+  min-width: 100%;
+}

package/src/care-programs/program.workspace.tsx

@@ -0,0 +1,181 @@
+import React, { FC } from 'react';
+import styles from './care-programs.scss';
+import {
+  Button,
+  ButtonSet,
+  Column,
+  DatePicker,
+  DatePickerInput,
+  FormLabel,
+  InlineLoading,
+  Stack,
+  TextInput,
+} from '@carbon/react';
+import { Controller, useForm } from 'react-hook-form';
+import { DefaultWorkspaceProps, ErrorState, LocationPicker, showSnackbar, useSession } from '@openmrs/esm-framework';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from 'react-i18next';
+import {
+  createProgramEnrollment,
+  Enrollement,
+  ProgramFormData,
+  ProgramFormSchema,
+  updateProgramEnrollment,
+  useProgramDetail,
+} from './care-program.resource';
+
+type ProgramFormProps = DefaultWorkspaceProps & {
+  enrollment?: Enrollement;
+  patientUuid: string;
+  programUuid: string;
+  onSubmitSuccess?: () => void;
+};
+
+const ProgramForm: FC<ProgramFormProps> = ({
+  patientUuid,
+  programUuid,
+  enrollment,
+  closeWorkspace,
+  onSubmitSuccess,
+}) => {
+  const getLocationUuid = () => {
+    if (!enrollment?.location?.uuid && session?.sessionLocation?.uuid) {
+      return session?.sessionLocation?.uuid;
+    }
+    return enrollment?.location?.uuid ?? null;
+  };
+
+  const session = useSession();
+  const { t } = useTranslation();
+  const { isLoading: isLoadingProgram, error: programError, program } = useProgramDetail(programUuid);
+  const form = useForm<ProgramFormData>({
+    resolver: zodResolver(ProgramFormSchema),
+    values: {
+      dateEnrolled: new Date(),
+      location: getLocationUuid() ?? '',
+      dateCompleted: enrollment?.dateCompleted ? new Date(enrollment.dateCompleted) : undefined,
+    },
+  });
+
+  const onSubmit = async (data: ProgramFormData) => {
+    const abortController = new AbortController();
+    try {
+      if (enrollment) {
+        await updateProgramEnrollment(enrollment.uuid, data, abortController);
+      } else {
+        await createProgramEnrollment(program, patientUuid, data, abortController);
+      }
+      showSnackbar({
+        kind: 'success',
+        title: 'Success',
+        subtitle: t('programEnrollmentSuccessful', 'Program enrollment successful'),
+      });
+
+      closeWorkspace();
+      onSubmitSuccess?.();
+    } catch (e) {
+      showSnackbar({ kind: 'error', title: 'Error', subtitle: e?.message });
+      console.error(e);
+    }
+  };
+  if (isLoadingProgram) {
+    return <InlineLoading />;
+  }
+  if (programError) {
+    return <ErrorState headerTitle={t('error', 'Error')} error={programError} />;
+  }
+  return (
+    <form className={styles.form} onSubmit={form.handleSubmit(onSubmit)}>
+      <Stack gap={4} className={styles.grid}>
+        <Column>
+          <TextInput
+            readOnly
+            value={program?.name}
+            title={t('program', 'Program')}
+            id={'program'}
+            labelText={t('program', 'Program')}
+          />
+        </Column>
+        <Column>
+          <Controller
+            control={form.control}
+            name="dateEnrolled"
+            render={({ field, fieldState: { error } }) => (
+              <DatePicker
+                className={styles.datePickerInput}
+                dateFormat="d/m/Y"
+                datePickerType="single"
+                value={field.value}
+                onChange={(dates) => field.onChange(dates?.[0] ?? 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="dateCompleted"
+            render={({ field, fieldState: { error } }) => (
+              <DatePicker
+                className={styles.datePickerInput}
+                dateFormat="d/m/Y"
+                value={field.value}
+                datePickerType="single"
+                onChange={(dates) => field.onChange(dates?.[0] ?? undefined)}
+                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>
+          <Controller
+            control={form.control}
+            name="location"
+            render={({ field: { value, onChange }, fieldState: { error } }) => (
+              <React.Fragment>
+                <FormLabel className={`${styles.locationLabel} cds--label`}>
+                  {t('enrollmentLocation', 'Enrollment location')}
+                </FormLabel>
+                <LocationPicker
+                  selectedLocationUuid={value}
+                  defaultLocationUuid={session?.sessionLocation?.uuid}
+                  locationTag="Login Location"
+                  onChange={(locationUuid) => onChange(locationUuid)}
+                />
+              </React.Fragment>
+            )}
+          />
+        </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 ProgramForm;

package/src/hooks/useCarePrograms.tsx

@@ -1,5 +1,6 @@
 import useSWR from 'swr';
 import { openmrsFetch } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
 
 export type PatientCarePrograms = {
   uuid: string;
@@ -20,8 +21,18 @@ export const useCarePrograms = (patientUuid: string) => {
     mutate: mutateEligiblePrograms,
   } = useSWR<{ data: Array<PatientCarePrograms> }>(url, openmrsFetch);
 
+  const eligibleCarePrograms = useMemo(
+    () => data?.data?.filter((careProgram) => careProgram.enrollmentStatus !== 'active') ?? [],
+    [data],
+  );
+
+  const activeCarePrograms = useMemo(
+    () => data?.data?.filter((careProgram) => careProgram.enrollmentStatus !== 'active') ?? [],
+    [data],
+  );
   return {
-    carePrograms: data?.data?.filter((careProgram) => careProgram.enrollmentStatus !== 'active') ?? [],
+    eligibleCarePrograms,
+    activeCarePrograms,
     error,
     isLoading,
     isValidating,

package/src/index.ts

@@ -11,6 +11,7 @@ import PatientSummary from './patient-summary/patient-summary.component';
 import DispensingPatientVitals from './dispensing-patient-details/patient-vitals.component';
 import PatientDischargeSideRailIcon from './patient-discharge/discharge-workspace-siderail.component';
 import PatientDischargeWorkspace from './patient-discharge/patient-discharge.workspace';
+import ProgramForm from './care-programs/program.workspace';
 
 const moduleName = '@kenyaemr/esm-care-panel-app';
 
@@ -52,3 +53,4 @@ export const patientDischargeWorkspace = getAsyncLifecycle(
   () => import('./patient-discharge/patient-discharge.workspace'),
   options,
 );
+export const mchProgramForm = getSyncLifecycle(ProgramForm, options);

package/src/routes.json

@@ -83,6 +83,13 @@
       "canHide": true,
       "width": "extra-wide",
       "groups": ["ward-patient"]
+    },
+    
+    {
+      "name": "mch-program-form-workspace",
+      "component": "mchProgramForm",
+      "title": "Program Form",
+      "type": "workspace"
     }
   ]
 }

package/translations/am.json

@@ -35,6 +35,7 @@
   "dateOfEntryPoint": "የመግቢያ ነጥብ ቀን",
   "dateStartedART": "ኤአርቲ የተጀመረበት ቀን",
   "deathDate": "የሞት ቀን",
+  "delete": "Delete",
   "deleteRegimen": "ስርዓት ሰርዝ",
   "deleteRegimenModalConfirmationText": "ስርዓቱን መሰረዝ ይፈልጋሉ?",
   "description": "መግለጫ",