(Refactor) Expounding community referrals to facility wide referrals …

…(Facility to Facility Referral) (#270)

* (chore) removing community to facility wide referrals

* (chore) restructuring the header and tabs added refer patient button

* (refactor) named refer patient button

* (feat) added enhancement initial referral form workspace

* (refactor) limit of query from 10 to 15

* (feat) added search for facility location

* (chore) removed the spacing in between buttons and tabs

* (refactor) renamed the save button to refer patient

* (refactor) translations

packages/esm-shr-app/src/header/community-referrals-header.component.tsx → packages/esm-shr-app/src/header/referrals-header.component.tsx

@@ -2,20 +2,21 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Calendar, Location } from '@carbon/react/icons';
 import { useSession, formatDate } from '@openmrs/esm-framework';
-import CommunityReferralsIllustration from './community-referrals-illustration.component';
-import styles from './community-referrals-header.scss';
+import styles from './referrals-header.scss';
+import ReferralsIllustration from './referrals-illustration.component';
 
-export const CommunityReferralsHeader: React.FC = () => {
+export const ReferralsHeader: React.FC = () => {
   const { t } = useTranslation();
   const userSession = useSession();
   const userLocation = userSession?.sessionLocation?.display;
 
   return (
     <div className={styles.header}>
       <div className={styles['left-justified-items']}>
-        <CommunityReferralsIllustration />
+        <ReferralsIllustration />
         <div className={styles['page-labels']}>
-          <p className={styles['page-name']}>{t('communityReferrals', 'Community Referrals')}</p>
+          <p>{t('facilityWide', 'Facility Wide')}</p>
+          <p className={styles['page-name']}>{t('referrals', 'Referrals')}</p>
         </div>
       </div>
       <div className={styles['right-justified-items']}>

packages/esm-shr-app/src/header/community-referrals-header.scss → packages/esm-shr-app/src/header/referrals-header.scss

@@ -1,3 +1,4 @@
+@use '@carbon/layout';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
 @import '~@openmrs/esm-styleguide/src/vars';

packages/esm-shr-app/src/header/community-referrals-illustration.component.tsx → packages/esm-shr-app/src/header/referrals-illustration.component.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ConnectReference } from '@carbon/react/icons';
-import styles from './community-referrals-header.scss';
+import styles from './referrals-header.scss';
 
-const CommunityReferralsIllustration: React.FC = () => {
+const ReferralsIllustration: React.FC = () => {
   return (
     <div className={styles.svgContainer}>
       <ConnectReference className={styles.iconOverrides} />
     </div>
   );
 };
 
-export default CommunityReferralsIllustration;
+export default ReferralsIllustration;

packages/esm-shr-app/src/index.ts

@@ -4,8 +4,9 @@ import { referralDashboardMeta } from './dashboard.meta';
 import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
 import shrPatientSummaryComponent from './shrpatient-summary/shrpatient-summary.component';
 import { createHomeDashboardLink } from './create-dashboard-link';
-import ReferralReasonsDialogPopup from './community-referrals/referral-reasons/referral-reasons.component';
-import ReferralChartView from './community-referrals/patient-chart/referral-chart-view.component';
+import ReferralReasonsDialogPopup from './referrals/referral-reasons/referral-reasons.component';
+import ReferralChartView from './referrals/patient-chart/referral-chart-view.component';
+import FacilityRefferalForm from './workspace/referrals.workspace.component';
 
 const moduleName = '@kenyaemr/esm-shr-app';
 
@@ -26,10 +27,10 @@ export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }
 
-export const communityReferralsDashboardLink = getSyncLifecycle(
+export const ReferralsDashboardLink = getSyncLifecycle(
   createHomeDashboardLink({
-    name: 'community-referrals',
-    title: 'Community referrals',
+    name: 'referrals',
+    title: 'Referrals',
   }),
   options,
 );
@@ -44,3 +45,4 @@ export const referralReasonsDialogPopup = getSyncLifecycle(ReferralReasonsDialog
 // Dashboard links for referrals and the corresponding view in the patient chart
 export const referralWidget = getSyncLifecycle(ReferralChartView, options);
 export const referralLink = getSyncLifecycle(createDashboardLink(referralDashboardMeta), options);
+export const facilityRefferalForm = getSyncLifecycle(FacilityRefferalForm, options);

packages/esm-shr-app/src/referrals-wrap.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { ReferralsHeader } from './header/referrals-header.component';
+import ReferralTabs from './referrals/referral-tabs/referrals-tabs.component';
+import { mutate } from 'swr';
+import { pullFacilityReferrals } from './referrals/refferals.resource';
+
+const ReferralWrap: React.FC = () => {
+  const [isLoadingFacilityReferrals, setIsLoadingFacilityReferrals] = useState(false);
+
+  const pullReferrals = () => {
+    setIsLoadingFacilityReferrals(true);
+    pullFacilityReferrals()
+      .then((r) => {
+        mutate(
+          (key) => typeof key === 'string' && key.startsWith('/ws/rest/v1/kenyaemril/communityReferrals?status=active'),
+        );
+        setIsLoadingFacilityReferrals(false);
+      })
+      .catch((err) => {
+        setIsLoadingFacilityReferrals(false);
+      });
+  };
+
+  return (
+    <div className={`omrs-main-content`}>
+      <ReferralsHeader />
+      <ReferralTabs isLoadingFacilityReferrals />
+    </div>
+  );
+};
+
+export default ReferralWrap;

packages/esm-shr-app/src/community-referrals/patient-chart/referral-chart-view.component.tsx → packages/esm-shr-app/src/referrals/patient-chart/referral-chart-view.component.tsx

@@ -4,7 +4,7 @@ import { Layer, Tile, DataTableSkeleton, InlineLoading } from '@carbon/react';
 import styles from './referral-chart-view.component.scss';
 import { ErrorState, formatDate, isDesktop, useConfig, useLayoutType } from '@openmrs/esm-framework';
 import { CardHeader, EmptyDataIllustration, EmptyState } from '@openmrs/esm-patient-common-lib';
-import { useCommunityReferral } from '../community-refferals.resource';
+import { useCommunityReferral } from '../refferals.resource';
 import { ReferralConfigObject } from '../../config-schema';
 
 export interface ReferralReasonsDialogPopupProps {

packages/esm-shr-app/src/community-referrals/patient-chart/referral-chart-view.test.tsx → packages/esm-shr-app/src/referrals/patient-chart/referral-chart-view.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { screen, render } from '@testing-library/react';
 import ReferralReasonsView from './referral-chart-view.component';
-import * as resource from '../community-refferals.resource';
+import * as resource from '../refferals.resource';
 
-jest.mock('../community-refferals.resource');
+jest.mock('../refferals.resource');
 jest.mock('@openmrs/esm-framework', () => ({
   ...jest.requireActual('@openmrs/esm-framework'),
   useConfig: jest.fn(() => ({ nationalPatientUniqueIdentifier: '12f85081e2-b4be-4e48-b3a4-7994b69bb101' })),

packages/esm-shr-app/src/referrals/referral-tabs/referrals-tabs.component.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tab, TabList, Tabs, Button, TabPanel, TabPanels, InlineLoading } from '@carbon/react';
+import styles from './referrals-tabs.scss';
+import ReferralTable from '../referrals.component';
+import { AirlineManageGates, UpdateNow } from '@carbon/react/icons';
+import { launchWorkspace } from '@openmrs/esm-framework';
+import { pullFacilityReferrals } from '../refferals.resource';
+import { mutate } from 'swr';
+
+interface ReferralTabsProps {
+  isLoadingFacilityReferrals: boolean;
+}
+
+const ReferralTabs: React.FC<ReferralTabsProps> = () => {
+  const { t } = useTranslation();
+  const [activeTabIndex, setActiveTabIndex] = React.useState<number>(0);
+  const [isLoadingFacilityReferrals, setIsLoadingFacilityReferrals] = useState(false);
+
+  const handleReferral = () => {
+    launchWorkspace('facility-referral-form', {
+      workspaceTitle: 'Referral Form',
+    });
+  };
+
+  const pullReferrals = () => {
+    setIsLoadingFacilityReferrals(true);
+    pullFacilityReferrals()
+      .then((r) => {
+        mutate(
+          (key) => typeof key === 'string' && key.startsWith('/ws/rest/v1/kenyaemril/communityReferrals?status=active'),
+        );
+        setIsLoadingFacilityReferrals(false);
+      })
+      .catch((err) => {
+        setIsLoadingFacilityReferrals(false);
+      });
+  };
+
+  const handleTabChange = ({ selectedIndex }: { selectedIndex: number }) => {
+    setActiveTabIndex(selectedIndex);
+  };
+
+  return (
+    <div className={styles.referralsList} data-testid="referralsList-list">
+      <div className={styles.tabsContainer}>
+        <Tabs selectedIndex={activeTabIndex} onChange={handleTabChange} className={styles.tabs}>
+          <TabList aria-label="Referrals tabs" contained>
+            <Tab className={styles.tab}>{t('fromCommunity', 'From Community')}</Tab>
+            <Tab className={styles.tab}>{t('fromFacility', 'From Facility')}</Tab>
+            <Tab className={styles.tab}>{t('completed', 'Completed')}</Tab>
+          </TabList>
+        </Tabs>
+        <div className={styles.actionBtn}>
+          <Button
+            kind="primary"
+            renderIcon={(props) => <UpdateNow size={20} {...props} />}
+            iconDescription={t('pullReferrals', 'Pull Referrals')}
+            onClick={pullReferrals}
+            className={styles.actionBtn}
+            disabled={isLoadingFacilityReferrals}>
+            {t('pullReferrals', 'Pull Referrals')}
+          </Button>
+          <Button
+            kind="tertiary"
+            renderIcon={(props) => <AirlineManageGates size={20} {...props} />}
+            onClick={handleReferral}
+            iconDescription={t('referralPatient', 'Refer Patient')}>
+            {t('referralPatient', 'Refer Patient')}
+          </Button>
+        </div>
+      </div>
+      <div>{isLoadingFacilityReferrals && <InlineLoading description="Pulling referrals..." />}</div>
+      <TabPanels>
+        <TabPanel className={styles.tabPanel}>
+          <ReferralTable status="active" />
+        </TabPanel>
+        <TabPanel className={styles.tabPanel}>
+          <ReferralTable status="active" />
+        </TabPanel>
+        <TabPanel className={styles.tabPanel}>
+          <ReferralTable status="completed" />
+        </TabPanel>
+      </TabPanels>
+    </div>
+  );
+};
+
+export default ReferralTabs;

packages/esm-shr-app/src/community-referrals/community-referral-tabs/community-referrals-tabs.scss → packages/esm-shr-app/src/referrals/referral-tabs/referrals-tabs.scss

@@ -24,6 +24,7 @@
     border-bottom: none;
   }
 }
+
 .left-justified-items {
   display: flex;
   flex-direction: row;
@@ -188,32 +189,20 @@
   color: $text-02;
 }
 
-.metricsContainer {
+.actionBtn {
   display: flex;
-  justify-content: space-between;
-  background-color: $ui-02;
-  height: spacing.$spacing-10;
-  align-items: center;
-  padding: 0 spacing.$spacing-05;
+  gap: 0.5rem;
+  margin-right: layout.$spacing-05;
 }
 
-.metricsTitle {
-  @include type.type-style('heading-03');
-  color: $ui-05;
+.mainSection {
+  display: grid;
+  grid-template-columns: 16rem 1fr;
 }
 
-.actionsContainer {
+.tabsContainer {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: $ui-02;
-}
-.actionBtn {
-  display: flex;
-  column-gap: 0.5rem;
-}
-
-.mainSection {
-  display: grid;
-  grid-template-columns: 16rem 1fr;
+  padding-left: 1rem;
 }

packages/esm-shr-app/src/community-referrals/referrals-actions.component.tsx → packages/esm-shr-app/src/referrals/referrals-actions.component.tsx

@@ -4,7 +4,7 @@ import { Button } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { navigate, showModal, showSnackbar } from '@openmrs/esm-framework';
 import { ReferralReasonsProps } from '../types';
-import { processCommunityReferral } from './community-refferals.resource';
+import { processCommunityReferral } from './refferals.resource';
 
 interface ReferralReasonData {
   referralData: ReferralReasonsProps;

packages/esm-shr-app/src/community-referrals/community-referrals.component.tsx → packages/esm-shr-app/src/referrals/referrals.component.tsx

@@ -19,17 +19,17 @@ import {
 } from '@carbon/react';
 import { useLayoutType, isDesktop, usePagination, navigate } from '@openmrs/esm-framework';
 import { EmptyState } from '@openmrs/esm-patient-common-lib';
-import styles from '../community-referrals/community-referral-tabs/community-referrals-tabs.scss';
+import styles from '../referrals/referral-tabs/referrals-tabs.scss';
 import { useTranslation } from 'react-i18next';
-import { useCommunityReferrals } from './community-refferals.resource';
+import { useCommunityReferrals } from './refferals.resource';
 import CommunityReferralActions from './referrals-actions.component';
 import { ReferralReasonsProps } from '../types';
 
-type CommunityReferralProps = {
+type ReferralProps = {
   status: string;
 };
 
-const CommunityReferrals: React.FC<CommunityReferralProps> = (data) => {
+const ReferralTable: React.FC<ReferralProps> = (data) => {
   const { t } = useTranslation();
   const { referrals, isLoading, isValidating } = useCommunityReferrals(data.status);
   const layout = useLayoutType();
@@ -241,4 +241,4 @@ function FilterableTableHeader({ layout, handleSearch, isValidating, responsiveS
     </>
   );
 }
-export default CommunityReferrals;
+export default ReferralTable;