Regimem component

packages/esm-care-panel-app/src/care-panel/care-panel.component.tsx

@@ -37,38 +37,40 @@ const CarePanel: React.FC<CarePanelProps> = ({ patientUuid, formEntrySub, launch
   }
 
   return (
-    <div className={styles.widgetCard}>
-      <CardHeader title={t('carePanel', 'Care Panel')}>
-        {isLoading ? (
-          <span>
-            <InlineLoading />
-          </span>
-        ) : null}
-        <div className={styles.contextSwitcherContainer}>
-          <ContentSwitcher
-            size="sm"
-            selectedIndex={0}
-            onChange={({ index }) => {
-              setActiveTabIndex(index as number);
-            }}>
-            {patientPrograms?.length > 0
-              ? patientPrograms.map((index, val) => <Switch name={index} text={index} key={val} value={val} />)
-              : null}
-          </ContentSwitcher>
+    <>
+      <div className={styles.widgetCard}>
+        <CardHeader title={t('carePanel', 'Care Panel')}>
+          {isLoading ? (
+            <span>
+              <InlineLoading />
+            </span>
+          ) : null}
+          <div className={styles.contextSwitcherContainer}>
+            <ContentSwitcher
+              size="sm"
+              selectedIndex={0}
+              onChange={({ index }) => {
+                setActiveTabIndex(index as number);
+              }}>
+              {patientPrograms?.length > 0
+                ? patientPrograms.map((index, val) => <Switch name={index} text={index} key={val} value={val} />)
+                : null}
+            </ContentSwitcher>
+          </div>
+        </CardHeader>
+        <div style={{ width: '100%' }}>
+          <ProgramSummary patientUuid={patientUuid} programName={patientPrograms[activeTabIndex]} />
+          <ProgramEnrollment
+            patientUuid={patientUuid}
+            programName={patientPrograms[activeTabIndex]}
+            data={data}
+            formEntrySub={formEntrySub}
+            launchPatientWorkspace={launchPatientWorkspace}
+          />
+          <RegimenHistory patientUuid={patientUuid} category={patientPrograms[activeTabIndex]} />
         </div>
-      </CardHeader>
-      <div style={{ width: '100%' }}>
-        <ProgramSummary patientUuid={patientUuid} programName={patientPrograms[activeTabIndex]} />
-        <ProgramEnrollment
-          patientUuid={patientUuid}
-          programName={patientPrograms[activeTabIndex]}
-          data={data}
-          formEntrySub={formEntrySub}
-          launchPatientWorkspace={launchPatientWorkspace}
-        />
-        <RegimenHistory patientUuid={patientUuid} category={patientPrograms[activeTabIndex]} />
       </div>
-    </div>
+    </>
   );
 };
 

packages/esm-care-panel-app/src/config-schema.ts

@@ -1 +1,17 @@
-export const configSchema = {};
+import { Type } from '@openmrs/esm-framework';
+
+export interface CarePanelConfig {
+  regimenObs: {
+    encounterProviderRoleUuid: string;
+  };
+}
+
+export const configSchema = {
+  regimenObs: {
+    encounterProviderRoleUuid: {
+      _type: Type.UUID,
+      _default: 'a0b03050-c99b-11e0-9572-0800200c9a66',
+      _description: "The provider role to use for the regimen encounter. Default is 'Unkown'.",
+    },
+  },
+};

packages/esm-care-panel-app/src/hooks/useNonStandardRegimen.ts

@@ -0,0 +1,18 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+interface nonStandardRegimen {
+  name: string;
+  uuid: string;
+}
+
+export const useNonStandardRegimen = () => {
+  const nonStandardRegimenUrl = `/ws/rest/v1/kenyaemr/arvDrugs`;
+  const { data, mutate, error, isLoading } = useSWR<{ data: { results: Array<nonStandardRegimen> } }>(
+    nonStandardRegimenUrl,
+    openmrsFetch,
+  );
+
+  const nonStandardRegimen = data?.data?.results ? data?.data?.results : [];
+  return { nonStandardRegimen, isLoading, error };
+};

packages/esm-care-panel-app/src/hooks/useOverlay.tsx

@@ -0,0 +1,45 @@
+import { getGlobalStore } from '@openmrs/esm-framework';
+import { useCallback, useEffect, useState } from 'react';
+
+export interface OverlayStore {
+  isOverlayOpen: boolean;
+  component?: any;
+  header: string;
+}
+
+const initialState: OverlayStore = { isOverlayOpen: false, header: '' };
+
+const getOverlayStore = () => {
+  return getGlobalStore('regimen-store', initialState);
+};
+
+export const launchOverlay = (headerTitle: string, componentToRender: any) => {
+  const store = getOverlayStore();
+  store.setState({ isOverlayOpen: true, component: componentToRender, header: headerTitle });
+};
+
+export const closeOverlay = (): void => {
+  const store = getOverlayStore();
+  store.setState({ component: null, isOverlayOpen: false });
+};
+
+export const useOverlay = () => {
+  const [overlay, setOverlay] = useState<OverlayStore>();
+
+  const update = useCallback((state: OverlayStore) => {
+    setOverlay(state);
+  }, []);
+
+  useEffect(() => {
+    update(getOverlayStore().getState());
+    getOverlayStore().subscribe(update);
+  }, [update]);
+
+  const { isOverlayOpen, component, header } = overlay ?? {};
+
+  return {
+    isOverlayOpen,
+    component,
+    header,
+  };
+};

packages/esm-care-panel-app/src/hooks/useRegimenEncounter.ts

@@ -0,0 +1,11 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { RegimenEncounter } from '../types';
+
+export const useRegimenEncounter = (category: string, patientUuid: string) => {
+  const regimenEncounterUrl = `/ws/rest/v1/kenyaemr/lastRegimenEncounter?patientUuid=${patientUuid}&category=${category}`;
+  const { data, mutate, error, isLoading } = useSWR<{ data: { results } }>(regimenEncounterUrl, openmrsFetch);
+
+  const regimenEncounter = data?.data.results ? data?.data?.results : '';
+  return { regimenEncounter, isLoading, error };
+};

packages/esm-care-panel-app/src/hooks/useRegimenReason.ts

@@ -0,0 +1,22 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+interface RegimenReason {
+  category: string;
+  reason: Array<Reason>;
+}
+interface Reason {
+  label: string;
+  value: string;
+}
+
+export const useRegimenReason = () => {
+  const regimenReasonUrl = `/ws/rest/v1/kenyaemr/regimenReason`;
+  const { data, mutate, error, isLoading } = useSWR<{ data: { results: Array<RegimenReason> } }>(
+    regimenReasonUrl,
+    openmrsFetch,
+  );
+
+  const regimenReason = data?.data?.results ? data?.data?.results : [];
+  return { regimenReason, isLoading, error };
+};

packages/esm-care-panel-app/src/hooks/useStandardRegimen.ts

@@ -0,0 +1,29 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+interface StandardRegimen {
+  categoryCode: string;
+  category: Array<RegimenCategory>;
+}
+
+interface RegimenCategory {
+  regimenline: string;
+  regimenLineValue: string;
+  regimen: Array<Regimen>;
+}
+
+interface Regimen {
+  name: string;
+  conceptRef: string;
+}
+
+export const useStandardRegimen = () => {
+  const standardRegimenUrl = `/ws/rest/v1/kenyaemr/standardRegimen`;
+  const { data, mutate, error, isLoading } = useSWR<{ data: { results: Array<StandardRegimen> } }>(
+    standardRegimenUrl,
+    openmrsFetch,
+  );
+
+  const standardRegimen = data?.data?.results ? data?.data?.results : [];
+  return { standardRegimen, isLoading, error };
+};

packages/esm-care-panel-app/src/index.ts

@@ -1,7 +1,7 @@
 import { getAsyncLifecycle, defineConfigSchema, registerBreadcrumbs, getSyncLifecycle } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
 import { dashboardMeta } from './dashboard.meta';
-import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
+import { createDashboardLink, registerWorkspace } from '@openmrs/esm-patient-common-lib';
 
 const moduleName = '@kenyaemr/esm-care-panel-app';
 
@@ -17,6 +17,20 @@ export const carePanelPatientSummary = getAsyncLifecycle(
   () => import('./patient-summary/patient-summary.component'),
   options,
 );
+export const deleteRegimenConfirmationDialog = getAsyncLifecycle(
+  () => import('./regimen-editor/delete-regimen-modal.component'),
+  options,
+);
+registerWorkspace({
+  name: 'patient-regimen-workspace',
+  title: 'Regimen Form',
+  load: getAsyncLifecycle(() => import('./regimen-editor/regimen-form.component'), options),
+  canMaximize: true,
+  canHide: true,
+  width: 'wider',
+  type: 'clinical-form',
+});
+
 // t('carePanel', 'Care panel')
 export const carePanelSummaryDashboardLink = getSyncLifecycle(
   createDashboardLink({ ...dashboardMeta, moduleName }),

packages/esm-care-panel-app/src/program-summary/program-summary.component.tsx

@@ -4,14 +4,18 @@ import { useProgramSummary } from '../hooks/useProgramSummary';
 import { useTranslation } from 'react-i18next';
 import { useLayoutType } from '@openmrs/esm-framework';
 import { StructuredListSkeleton } from '@carbon/react';
-import { ProgramType } from '../types';
+import { ProgramType, RegimenType } from '../types';
+import RegimenButton from '../regimen-editor/regimen-button.component';
+import { useRegimenEncounter } from '../hooks/useRegimenEncounter';
 export interface ProgramSummaryProps {
   patientUuid: string;
   programName: string;
 }
 const ProgramSummary: React.FC<ProgramSummaryProps> = ({ patientUuid, programName }) => {
   const { data, isError, isLoading } = useProgramSummary(patientUuid);
   const { t } = useTranslation();
+  const { regimenEncounter } = useRegimenEncounter(RegimenType[programName], patientUuid);
+
   const isTablet = useLayoutType() == 'tablet';
   if (isLoading) {
     return <StructuredListSkeleton role="progressbar" />;
@@ -69,6 +73,16 @@ const ProgramSummary: React.FC<ProgramSummaryProps> = ({ patientUuid, programNam
                     {data?.HIV?.lastEncDetails?.regimenShortDisplay
                       ? data?.HIV?.lastEncDetails?.regimenShortDisplay
                       : '--'}{' '}
+                    <RegimenButton
+                      patientUuid={patientUuid}
+                      category={programName}
+                      onRegimen={
+                        data?.HIV?.lastEncDetails?.regimenShortDisplay
+                          ? data?.HIV?.lastEncDetails?.regimenShortDisplay
+                          : ''
+                      }
+                      lastRegimenEncounter={regimenEncounter}
+                    />
                   </p>
                 </div>
                 <div className={styles.content}>
@@ -122,6 +136,12 @@ const ProgramSummary: React.FC<ProgramSummaryProps> = ({ patientUuid, programNam
                         ? data?.TB?.lastTbEncounter?.regimenShortDisplay
                         : t('neverOnTbRegimen', 'Never on TB regimen')}
                     </span>
+                    <RegimenButton
+                      patientUuid={patientUuid}
+                      category={programName}
+                      onRegimen={data?.TB?.lastTbEncounter ? data?.TB?.lastTbEncounter?.regimenShortDisplay : ''}
+                      lastRegimenEncounter={regimenEncounter}
+                    />
                   </p>
                 </div>
                 <div className={styles.content}>

packages/esm-care-panel-app/src/regimen-editor/delete-regimen-modal.component.tsx

@@ -0,0 +1,76 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { showNotification, showToast } from '@openmrs/esm-framework';
+import { deleteEncounter } from './regimen.resource';
+import { mutate } from 'swr';
+import { closeOverlay } from '../hooks/useOverlay';
+
+interface deleteRegimenModalProps {
+  closeCancelModal: () => void;
+  regimenEncounterUuid: string;
+  patientUuid: string;
+  category: string;
+}
+
+const DeleteRegimenModal: React.FC<deleteRegimenModalProps> = ({
+  closeCancelModal,
+  regimenEncounterUuid,
+  patientUuid,
+  category,
+}) => {
+  const { t } = useTranslation();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleCancel = useCallback(
+    (event) => {
+      event.preventDefault();
+      setIsSubmitting(true);
+
+      deleteEncounter(regimenEncounterUuid)
+        .then((response) => {
+          if (response.status === 204) {
+            closeCancelModal();
+            showToast({
+              critical: true,
+              kind: 'success',
+              description: t('regimenDeletedSuccessfully', 'Regimen successfully'),
+              title: t('regimenDeleted', 'Regimen deleted'),
+            });
+            mutate(`/ws/rest/v1/kenyaemr/regimenHistory?patientUuid=${patientUuid}&category=${category}`);
+            mutate(`/ws/rest/v1/kenyaemr/currentProgramDetails?patientUuid=${patientUuid}`);
+            mutate(`/ws/rest/v1/kenyaemr/patientSummary?patientUuid=${patientUuid}`);
+            closeOverlay();
+          }
+        })
+        .catch((err) => {
+          showNotification({
+            title: t('regimenDeletedError', 'Error deleting regimen'),
+            kind: 'error',
+            critical: true,
+            description: err?.message,
+          });
+        });
+    },
+    [t, regimenEncounterUuid, closeCancelModal, category, patientUuid],
+  );
+
+  return (
+    <div>
+      <ModalHeader closeModal={closeCancelModal} title={t('deleteRegimen', 'Delete Regimen')} />
+      <ModalBody>
+        <p>{t('deleteRegimenModalConfirmationText', 'Are you sure you want to delete regimen?')}</p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeCancelModal}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button kind="danger" onClick={handleCancel} disabled={isSubmitting}>
+          {t('deleteRegimen', 'Delete Regimen')}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default DeleteRegimenModal;