@kenyaemr/esm-active-visits-app 7.0.3-pre.89 → 8.0.1-pre.95

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"extensions":[{"name":"active-visits-widget","slot":"homepage-widgets-slot","component":"activeVisits","order":0},{"name":"visit-summary-widget","slot":"visit-summary-slot","component":"visitDetail"}],"pages":[],"version":"7.0.3-pre.89"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"extensions":[{"name":"active-visits-widget","slot":"homepage-widgets-slot","component":"activeVisits","order":0},{"name":"visit-summary-widget","slot":"visit-summary-slot","component":"visitDetail"},{"name":"active-visits-tile","slot":"home-metrics-tiles-slot","component":"homeActiveVisitsTile"},{"name":"total-visits-tile","slot":"home-metrics-tiles-slot","component":"homeTotalVisitsTile"}],"pages":[],"version":"8.0.1-pre.95"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-active-visits-app",
-  "version": "7.0.3-pre.89",
+  "version": "8.0.1-pre.95",
   "description": "Active visits widget microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-active-visits-app.js",
   "main": "src/index.ts",
@@ -51,5 +51,5 @@
   "devDependencies": {
     "webpack": "^5.74.0"
   },
-  "stableVersion": "7.0.2"
+  "stableVersion": "8.0.0"
 }

package/src/active-visits-widget/active-visits.scss

@@ -1,9 +1,9 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .container {
-  margin: 0rem 1rem;
+  margin: 0 layout.$spacing-05;
 }
 
 .activeVisitsContainer {
@@ -19,7 +19,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-05;
+  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
   background-color: $ui-02;
 }
 
@@ -60,20 +60,20 @@
 }
 
 .emptyRow {
-  padding: 0 1rem;
+  padding: 0 layout.$spacing-05;
   display: flex;
   align-items: center;
 }
 
 .visitSummaryContainer {
   width: 100%;
-  max-width: 768px;
-  margin: 1rem auto;
+  max-width: 48rem;
+  margin: layout.$spacing-05 auto;
 }
 
 .expandedActiveVisitRow {
   td {
-    padding: 0 2rem;
+    padding: 0 layout.$spacing-07;
 
     > div {
       max-height: max-content !important;
@@ -81,7 +81,7 @@
   }
 
   th[colspan] td[colspan] > div:first-child {
-    padding: 0 1rem;
+    padding: 0 layout.$spacing-05;
   }
 
   &:last-of-type th[colspan]:last-child {
@@ -90,14 +90,14 @@
 }
 
 .action {
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .content {
   @include type.type-style('heading-compact-01');
   color: $text-02;
-  margin-top: spacing.$spacing-05;
-  margin-bottom: spacing.$spacing-03;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
 }
 
 .desktopHeading,
@@ -112,7 +112,7 @@
     &:after {
       content: '';
       display: block;
-      width: 2rem;
+      width: layout.$spacing-07;
       padding-top: 3px;
       border-bottom: 0.375rem solid;
       @include brand-03(border-bottom-color);
@@ -128,8 +128,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: spacing.$spacing-05;
-  margin: spacing.$spacing-11;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-11;
   text-align: center;
 }
 
@@ -140,7 +140,7 @@
 .filterEmptyStateContent {
   @include type.type-style('heading-compact-02');
   color: $text-02;
-  margin-bottom: 0.5rem;
+  margin-bottom: layout.$spacing-03;
 }
 
 .filterEmptyStateHelper {
@@ -152,7 +152,7 @@
 html[dir='rtl'] {
   .activeVisitsContainer {
     .activeVisitsDetailHeaderContainer {
-      padding: spacing.$spacing-04 spacing.$spacing-05 spacing.$spacing-04 0;
+      padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-04 0;
     }
     .desktopHeading,
     .tabletHeading {
@@ -164,7 +164,7 @@ html[dir='rtl'] {
       & :first-child {
         svg {
           left: unset;
-          right: spacing.$spacing-03;
+          right: layout.$spacing-03;
         }
       }
       & :last-child {
@@ -180,7 +180,7 @@ html[dir='rtl'] {
         text-align: right;
         .serviceColor {
           margin-right: 0;
-          margin-left: spacing.$spacing-03;
+          margin-left: layout.$spacing-03;
         }
         button {
           text-align: right;

package/src/active-visits-widget/active-visits.test.tsx

@@ -1,29 +1,49 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import { useConfig } from '@openmrs/esm-framework';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { mockPatient, mockSession } from '__mocks__';
+import { configSchema, type SectionDefinition } from '../config-schema';
 import { useActiveVisits } from './active-visits.resource';
 import ActiveVisitsTable from './active-visits.component';
 
-const mockUseActiveVisits = useActiveVisits as jest.Mock;
+const mockUseActiveVisits = jest.mocked(useActiveVisits);
+const mockUseConfig = jest.mocked(useConfig<SectionDefinition>);
 
 jest.mock('./active-visits.resource', () => ({
   ...jest.requireActual('./active-visits.resource'),
   useActiveVisits: jest.fn(),
 }));
 
-const mockUseConfig = useConfig as jest.Mock;
-
 describe('ActiveVisitsTable', () => {
-  beforeEach(() => mockUseActiveVisits.mockReset());
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+    });
 
-  it('renders data table with active visits', () => {
-    mockUseActiveVisits.mockImplementation(() => ({
-      activeVisits: [{ id: '1', name: 'John Doe', visitType: 'Checkup', patientUuid: 'uuid1' }],
+    mockUseActiveVisits.mockReturnValue({
+      activeVisits: [
+        {
+          age: '20',
+          gender: 'male',
+          id: '1',
+          idNumber: mockPatient.uuid,
+          location: mockSession.data.sessionLocation.uuid,
+          name: 'John Doe',
+          patientUuid: 'uuid1',
+          visitStartTime: '',
+          visitType: 'Checkup',
+          visitUuid: 'visit-uuid-1',
+        },
+      ],
       isLoading: false,
       isValidating: false,
-      error: null,
-    }));
+      error: undefined,
+      totalResults: 1,
+    });
+  });
+
+  it('renders data table with active visits', () => {
     render(<ActiveVisitsTable />);
 
     expect(screen.getByText('Visit Time')).toBeInTheDocument();
@@ -41,15 +61,38 @@ describe('ActiveVisitsTable', () => {
   it('filters active visits based on search input', async () => {
     const user = userEvent.setup();
 
-    mockUseActiveVisits.mockImplementation(() => ({
+    mockUseActiveVisits.mockReturnValue({
       activeVisits: [
-        { id: '1', name: 'John Doe', visitType: 'Checkup', patientUuid: 'uuid1' },
-        { id: '2', name: 'Some One', visitType: 'Checkup', patientUuid: 'uuid2' },
+        {
+          age: '20',
+          gender: 'male',
+          id: '1',
+          idNumber: '000001A',
+          location: mockSession.data.sessionLocation.uuid,
+          name: 'John Doe',
+          patientUuid: 'uuid1',
+          visitStartTime: '',
+          visitType: 'Checkup',
+          visitUuid: 'visit-uuid-1',
+        },
+        {
+          age: '25',
+          gender: 'female',
+          id: '2',
+          idNumber: '000001B',
+          location: mockSession.data.sessionLocation.uuid,
+          name: 'Some One',
+          patientUuid: 'uuid2',
+          visitStartTime: '',
+          visitType: 'Checkup',
+          visitUuid: 'visit-uuid-2',
+        },
       ],
       isLoading: false,
       isValidating: false,
-      error: null,
-    }));
+      error: undefined,
+      totalResults: 2,
+    });
 
     render(<ActiveVisitsTable />);
 
@@ -57,16 +100,17 @@ describe('ActiveVisitsTable', () => {
     await user.type(searchInput, 'John');
 
     expect(screen.getByText('John Doe')).toBeInTheDocument();
-    expect(screen.queryByText('Some One')).toBeNull();
+    expect(screen.queryByText('Some One')).not.toBeInTheDocument();
   });
 
   it('displays empty state when there are no active visits', () => {
-    mockUseActiveVisits.mockImplementation(() => ({
+    mockUseActiveVisits.mockReturnValue({
       activeVisits: [],
       isLoading: false,
       isValidating: false,
-      error: null,
-    }));
+      error: undefined,
+      totalResults: 0,
+    });
 
     render(<ActiveVisitsTable />);
 
@@ -74,12 +118,13 @@ describe('ActiveVisitsTable', () => {
   });
 
   it('should not display the table when the data is loading', () => {
-    mockUseActiveVisits.mockImplementation(() => ({
-      activeVisits: undefined,
+    mockUseActiveVisits.mockReturnValue({
+      activeVisits: [],
       isLoading: true,
       isValidating: false,
-      error: null,
-    }));
+      error: undefined,
+      totalResults: 0,
+    });
 
     render(<ActiveVisitsTable />);
 
@@ -90,12 +135,13 @@ describe('ActiveVisitsTable', () => {
   });
 
   it('should display the error state when there is error', () => {
-    mockUseActiveVisits.mockImplementation(() => ({
-      activeVisits: undefined,
+    mockUseActiveVisits.mockReturnValue({
+      activeVisits: [],
       isLoading: false,
       isValidating: false,
-      error: 'Error in fetching data',
-    }));
+      error: new Error('Error fetching data'),
+      totalResults: 0,
+    });
 
     render(<ActiveVisitsTable />);
 
@@ -104,15 +150,38 @@ describe('ActiveVisitsTable', () => {
   });
 
   it('should display the pagination when pagination is true', () => {
-    mockUseActiveVisits.mockImplementation(() => ({
+    mockUseActiveVisits.mockReturnValue({
       activeVisits: [
-        { id: '1', name: 'John Doe', visitType: 'Checkup' },
-        { id: '2', name: 'Some One', visitType: 'Checkup' },
+        {
+          age: '20',
+          gender: 'male',
+          id: '1',
+          idNumber: '000001A',
+          location: mockSession.data.sessionLocation.uuid,
+          name: 'John Doe',
+          patientUuid: 'uuid1',
+          visitStartTime: '',
+          visitType: 'Checkup',
+          visitUuid: 'visit-uuid-1',
+        },
+        {
+          age: '25',
+          gender: 'female',
+          id: '2',
+          idNumber: '000001B',
+          location: mockSession.data.sessionLocation.uuid,
+          name: 'Some One',
+          patientUuid: 'uuid2',
+          visitStartTime: '',
+          visitType: 'Checkup',
+          visitUuid: 'visit-uuid-2',
+        },
       ],
       isLoading: false,
       isValidating: false,
-      error: null,
-    }));
+      error: undefined,
+      totalResults: 2,
+    });
 
     render(<ActiveVisitsTable />);
   });

package/src/config-schema.ts

@@ -19,16 +19,6 @@ export interface IdentifiersDefinition {
 
 export const configSchema = {
   activeVisits: {
-    pageSize: {
-      _type: Type.Number,
-      _description: 'Count of active visits to be shown in a single page.',
-      _default: 10,
-    },
-    pageSizes: {
-      _type: Type.Array,
-      _description: 'Customizable page sizes that user can choose',
-      _default: [10, 20, 50],
-    },
     identifiers: {
       _type: Type.Array,
       _description: 'Customizable list of identifiers to display on active visits table',
@@ -53,5 +43,15 @@ export const configSchema = {
       },
       _default: null,
     },
+    pageSize: {
+      _type: Type.Number,
+      _description: 'Count of active visits to be shown in a single page.',
+      _default: 10,
+    },
+    pageSizes: {
+      _type: Type.Array,
+      _description: 'Customizable page sizes that user can choose',
+      _default: [10, 20, 50],
+    },
   },
 };

package/src/home-page-tiles/active-visits-metric-tile/active-visits-tile.component.tsx

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

package/src/home-page-tiles/active-visits-metric-tile/active-visits.resource.ts

@@ -0,0 +1,28 @@
+import { openmrsFetch, restBaseUrl, useSession, type Visit } 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 = `${restBaseUrl}/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: { totalCount: number } }>(getUrl, openmrsFetch);
+
+  return {
+    count: data?.data.totalCount,
+    error,
+    isLoading,
+  };
+}

package/src/home-page-tiles/homepage-tiles.scss

@@ -0,0 +1,39 @@
+@use '@openmrs/esm-styleguide/src/vars' as *;
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.tileContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: space-between;
+  background-color: colors.$white;
+  border: 1px solid colors.$gray-20;
+  height: 7.875rem;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-03;
+}
+
+.tileHeader {
+  @include type.type-style('heading-01');
+  font-weight: 600;
+  line-height: 1.28572;
+  letter-spacing: 0.16px;
+  color: colors.$gray-70;
+}
+
+.displayDetails {
+  margin-top: layout.$spacing-06;
+}
+
+.displayData {
+  font-size: 1.75rem;
+  font-weight: 400;
+  line-height: 1.28572;
+  color: colors.$black;
+}
+
+.countLabel {
+  @include type.type-style('label-01');
+  color: $text-02;
+}

package/src/home-page-tiles/total-visits-metric-tile/total-visits-tile.component.tsx

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

package/src/home-page-tiles/total-visits-metric-tile/total-visits.resource.ts

@@ -0,0 +1,21 @@
+import { openmrsFetch, restBaseUrl, type Visit } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import dayjs from 'dayjs';
+
+const useTotalVisits = () => {
+  const customRepresentation = 'custom:(uuid,startDatetime,stopDatetime)';
+
+  const visitsUrl = `${restBaseUrl}/visit?includeInactive=true&v=${customRepresentation}&fromStartDate=${dayjs().format(
+    'YYYY-MM-DD',
+  )}`;
+
+  const { data, error, isLoading } = useSWR<{ data: { results: Array<Visit> } }>(visitsUrl, openmrsFetch);
+
+  return {
+    data: data?.data.results,
+    error,
+    isLoading,
+  };
+};
+
+export default useTotalVisits;

package/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';
@@ -19,3 +19,13 @@ export function startupApp() {
 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,
+);

package/src/routes.json

@@ -14,6 +14,16 @@
       "name": "visit-summary-widget",
       "slot": "visit-summary-slot",
       "component": "visitDetail"
+    },
+    {
+      "name": "active-visits-tile",
+      "slot": "home-metrics-tiles-slot",
+      "component": "homeActiveVisitsTile"
+    },
+    {
+      "name": "total-visits-tile",
+      "slot": "home-metrics-tiles-slot",
+      "component": "homeTotalVisitsTile"
     }
   ],
   "pages": []

package/src/types/index.ts

@@ -1,3 +1,5 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+
 export interface SearchedPatient {
   patientId: number;
   uuid: string;