(feat) O3-3018: Adding metric tiles to the refApp homepage.

packages/esm-active-visits-app/src/home-page-tiles/active-visits-metric-tile/active-visits-tile.component.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Tile } from '@carbon/react';
+import styles from '../homepage-tiles.scss';
+import { useTranslation } from 'react-i18next';
+import useActiveVisits from './active-visits-tile.resources';
+
+const ActiveVisitsTile: React.FC = () => {
+  const { data: activeVisitsData } = useActiveVisits();
+
+  const { t } = useTranslation();
+  return (
+    <React.Fragment>
+      <Tile className={styles.tileContainer}>
+        <div>
+          <div className={styles.tileContent}>
+            <div className={styles.tileHeader}>
+              <header>{t('activeVisits', 'Active Visits')}</header>
+            </div>
+            <div className={styles.displayDetails}>
+              <div className={styles.countLabel}>Patients</div>
+              <div className={styles.displayData}>{activeVisitsData?.length ?? 0}</div>
+            </div>
+          </div>
+        </div>
+      </Tile>
+    </React.Fragment>
+  );
+};
+
+export default ActiveVisitsTile;

packages/esm-active-visits-app/src/home-page-tiles/active-visits-metric-tile/active-visits-tile.resources.tsx

@@ -0,0 +1,28 @@
+import { openmrsFetch, useSession } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+export default function useActiveVisits() {
+  const session = useSession();
+  const sessionLocation = session?.sessionLocation?.uuid;
+
+  const customRepresentation = 'custom:(uuid,startDatetime,stopDatetime)';
+
+  const getUrl = () => {
+    let url = `/ws/rest/v1/visit?v=${customRepresentation}&`;
+    let urlSearchParams = new URLSearchParams();
+
+    urlSearchParams.append('includeInactive', 'false');
+    urlSearchParams.append('totalCount', 'true');
+    urlSearchParams.append('location', `${sessionLocation}`);
+
+    return url + urlSearchParams.toString();
+  };
+
+  const { data, error, isLoading } = useSWR<{ data: { results: any[]; totalCount: number } }>(getUrl, openmrsFetch);
+
+  return {
+    data: data?.data.results,
+    error,
+    isLoading,
+  };
+}

packages/esm-active-visits-app/src/home-page-tiles/homepage-tiles.scss

@@ -0,0 +1,42 @@
+@use '@carbon/type';
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: space-between;
+}
+
+.tileContainer {
+  background-color: white;
+  border: 0.0625rem solid #e0e0e0;
+  height: 7.875rem;
+  padding: 1rem;
+  margin: 0.5rem 0.5rem;
+}
+
+.tileHeader {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.28572;
+  letter-spacing: 0.16px;
+  color: #525252;
+}
+
+.displayDetails {
+  margin-top: 1.5rem;
+}
+
+.displayData {
+  font-size: 1.75rem;
+  font-weight: 400;
+  line-height: 1.28572;
+  letter-spacing: 0;
+  color: #161616;
+}
+
+.countLabel {
+  @include type.type-style('label-01');
+  color: $text-02;
+}

packages/esm-active-visits-app/src/home-page-tiles/metrics-slot.component.tsx

@@ -0,0 +1,9 @@
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import React from 'react';
+import styles from './metrics-slot.scss';
+
+const MetricsSlot = () => {
+  return <ExtensionSlot name="metrics-extension-slot" className={styles.extensionSlot} />;
+};
+
+export default MetricsSlot;

packages/esm-active-visits-app/src/home-page-tiles/metrics-slot.scss

@@ -0,0 +1,5 @@
+.extensionSlot {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  margin: 0 0.5rem;
+}

packages/esm-active-visits-app/src/home-page-tiles/total-visits-metric-tile/total-visits-tile.component.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Tile } from '@carbon/react';
+import styles from '../homepage-tiles.scss';
+import { useTranslation } from 'react-i18next';
+import useTotalVisits from './total-visits-tile.resources';
+
+const TotalVisitsTile: React.FC = () => {
+  const { data: appointmentsData } = useTotalVisits();
+
+  const { t } = useTranslation();
+
+  return (
+    <React.Fragment>
+      <Tile className={styles.tileContainer}>
+        <div>
+          <div className={styles.tileContent}>
+            <div className={styles.tileHeader}>
+              <header>{t('totalVisits', 'Total Visits Today')}</header>
+            </div>
+            <div className={styles.displayDetails}>
+              <div className={styles.countLabel}>Patients</div>
+              <div className={styles.displayData}>{appointmentsData?.length ?? 0}</div>
+            </div>
+          </div>
+        </div>
+      </Tile>
+    </React.Fragment>
+  );
+};
+
+export default TotalVisitsTile;

packages/esm-active-visits-app/src/home-page-tiles/total-visits-metric-tile/total-visits-tile.resources.tsx

@@ -0,0 +1,22 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import dayjs from 'dayjs';
+import { type Visit } from '../../types/index';
+
+const useTotalVisits = () => {
+  const omrsDateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZZ';
+  const currentVisitDate = dayjs(new Date().setHours(0, 0, 0, 0)).format(omrsDateFormat);
+  const customRepresentation = 'custom:(uuid,startDatetime,stopDatetime)';
+
+  const visitsUrl = `/ws/rest/v1/visit?includeInactive=true&v=${customRepresentation}&fromStartDate=${dayjs(
+    currentVisitDate,
+  ).format('YYYY-MM-DD')}`;
+
+  const { data, error, isLoading } = useSWR<{ data: { results: Visit[] } }>(visitsUrl, openmrsFetch);
+
+  const responseData = data?.data.results;
+
+  return { data: responseData, error, isLoading };
+};
+
+export default useTotalVisits;

packages/esm-active-visits-app/src/index.ts

@@ -1,4 +1,4 @@
-import { defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
 import activeVisitsComponent from './active-visits-widget/active-visits.component';
 import visitDetailComponent from './visits-summary/visit-detail.component';
@@ -16,6 +16,18 @@ export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }
 
+export const homePageTilesSlot = getAsyncLifecycle(() => import('./home-page-tiles/metrics-slot.component'), options);
+
 export const activeVisits = getSyncLifecycle(activeVisitsComponent, options);
 
 export const visitDetail = getSyncLifecycle(visitDetailComponent, options);
+
+export const homeActiveVisitsTile = getAsyncLifecycle(
+  () => import('./home-page-tiles/active-visits-metric-tile/active-visits-tile.component'),
+  options,
+);
+
+export const homeTotalVisitsTile = getAsyncLifecycle(
+  () => import('./home-page-tiles/total-visits-metric-tile/total-visits-tile.component'),
+  options,
+);

packages/esm-active-visits-app/src/routes.json

@@ -4,6 +4,21 @@
     "webservices.rest": "^2.2.0"
   },
   "extensions": [
+    {
+      "name": "homepage-tiles",
+      "slot": "home-metrics-tiles-slot",
+      "component": "homePageTilesSlot"
+    },
+    {
+      "name": "home-active-visits-tile",
+      "slot": "metrics-extension-slot",
+      "component": "homeActiveVisitsTile"
+    },
+    {
+      "name": "home-total-visits-tile",
+      "slot": "metrics-extension-slot",
+      "component": "homeTotalVisitsTile"
+    },
     {
       "name": "active-visits-widget",
       "slot": "homepage-widgets-slot",

packages/esm-active-visits-app/src/types/index.ts

@@ -1,3 +1,5 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+
 export interface SearchedPatient {
   patientId: number;
   uuid: string;
@@ -26,3 +28,16 @@ export interface Identifier {
   preferred: boolean;
   voided: boolean;
 }
+
+export interface Visit {
+  uuid: string;
+  display?: string;
+  encounters: Array<OpenmrsResource>;
+  patient?: OpenmrsResource;
+  visitType: OpenmrsResource;
+  location?: OpenmrsResource;
+  startDatetime: string;
+  stopDatetime?: string;
+  attributes?: Array<OpenmrsResource>;
+  [anythingElse: string]: any;
+}

packages/esm-active-visits-app/translations/en.json

@@ -29,6 +29,7 @@
   "tests": "Tests",
   "thereIsNoInformationToDisplayHere": "There is no information to display here",
   "time": "Time",
+  "totalVisits": "Total Visits Today",
   "visitStartTime": "Visit Time",
   "visitSummary": "Visit Summary",
   "visitType": "Visit Type"

packages/esm-appointments-app/src/homepage-tile/appointments-tile.component.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Tile } from '@carbon/react';
+import styles from './appointments-tile.scss';
+import { useTranslation } from 'react-i18next';
+import useAppointmentsData from './appointments-tile.resources';
+
+const AppointmentsTile: React.FC = () => {
+  const { data: appointmentsData } = useAppointmentsData();
+
+  const { t } = useTranslation();
+
+  return (
+    <React.Fragment>
+      <Tile className={styles.tileContainer}>
+        <div>
+          <div className={styles.tileContent}>
+            <div className={styles.tileHeader}>
+              <header>{t('scheduledForToday', 'Scheduled For Today')}</header>
+            </div>
+            <div className={styles.displayDetails}>
+              <div className={styles.countLabel}>Patients</div>
+              <div className={styles.displayData}>{appointmentsData?.length ?? 0}</div>
+            </div>
+          </div>
+        </div>
+      </Tile>
+    </React.Fragment>
+  );
+};
+
+export default AppointmentsTile;

packages/esm-appointments-app/src/homepage-tile/appointments-tile.resources.tsx

@@ -0,0 +1,18 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import dayjs from 'dayjs';
+
+const useAppointmentsData = () => {
+  const omrsDateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZZ';
+  const appointmentDate = dayjs(new Date().setHours(0, 0, 0, 0)).format(omrsDateFormat);
+
+  const url = `ws/rest/v1/appointment/all?forDate=${appointmentDate}`;
+
+  const { data, error, isLoading } = useSWR<{ data: Array<any> }>(url, openmrsFetch);
+
+  const responseData = data?.data;
+
+  return { data: responseData, error, isLoading };
+};
+
+export default useAppointmentsData;

packages/esm-appointments-app/src/homepage-tile/appointments-tile.scss

@@ -0,0 +1,42 @@
+@use '@carbon/type';
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: space-between;
+}
+
+.tileContainer {
+  background-color: white;
+  border: 0.0625rem solid #e0e0e0;
+  height: 7.875rem;
+  padding: 1rem;
+  margin: 0.5rem 0.5rem;
+}
+
+.tileHeader {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.28572;
+  letter-spacing: 0.16px;
+  color: #525252;
+}
+
+.displayDetails {
+  margin-top: 1.5rem;
+}
+
+.displayData {
+  font-size: 1.75rem;
+  font-weight: 400;
+  line-height: 1.28572;
+  letter-spacing: 0;
+  color: #161616;
+}
+
+.countLabel {
+  @include type.type-style('label-01');
+  color: $text-02;
+}

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

@@ -98,4 +98,9 @@ export const patientAppointmentsCancelConfirmationDialog = getAsyncLifecycle(
   options,
 );
 
+export const homeAppointmentsTile = getAsyncLifecycle(
+  () => import('./homepage-tile/appointments-tile.component'),
+  options,
+);
+
 export const appointmentsFormWorkspace = getAsyncLifecycle(() => import('./form/appointments-form.component'), options);

packages/esm-appointments-app/src/routes.json

@@ -4,6 +4,11 @@
     "webservices.rest": "^2.2.0"
   },
   "extensions": [
+    {
+      "name": "home-appointments-tile",
+      "slot": "metrics-extension-slot",
+      "component": "homeAppointmentsTile"
+    },
     {
       "name": "home-appointments",
       "slot": "homepage-widgets-slot",

packages/esm-appointments-app/translations/en.json

@@ -122,6 +122,7 @@
   "saveAndClose": "Save and close",
   "scheduled": "Scheduled",
   "scheduledAppointments": "Scheduled appointments",
+  "scheduledForToday": "Scheduled For Today",
   "search": "Search",
   "searchForAVisitType": "Search for a visit type",
   "selectAppointmentStatus": "Select status",