@kenyaemr/esm-appointments-app 7.0.3-pre.89 → 8.0.0

package/src/header/appointments-header.scss

@@ -1,12 +1,12 @@
 @use '@carbon/colors';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .header {
   @include type.type-style('body-compact-02');
   color: $text-02;
-  height: spacing.$spacing-12;
+  height: layout.$spacing-12;
   background-color: $ui-02;
   border-bottom: 1px solid $ui-03;
   display: flex;
@@ -22,7 +22,7 @@
 .right-justified-items {
   @include type.type-style('body-compact-02');
   color: $text-02;
-  margin: 0.5rem;
+  margin: layout.$spacing-03;
 }
 
 .page-name {
@@ -30,10 +30,10 @@
 }
 
 .page-labels {
-  margin: 1rem 0;
+  margin: layout.$spacing-05 0;
 
   p:first-of-type {
-    margin-bottom: 0.25rem;
+    margin-bottom: layout.$spacing-02;
   }
 }
 
@@ -47,15 +47,15 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  margin-top: 0.25rem;
+  margin-top: layout.$spacing-02;
 }
 
 .value {
-  margin-left: 0.25rem;
+  margin-left: layout.$spacing-02;
 }
 
 .middot {
-  margin: 0 0.5rem;
+  margin: 0 layout.$spacing-03;
 }
 
 .view {
@@ -64,7 +64,7 @@
 
 .datePicker {
   background-color: transparent;
-  width: 10rem;
+  width: layout.$spacing-13;
   border: none;
   & > input {
     color: colors.$blue-10;
@@ -78,7 +78,7 @@
   }
 
   :global(.cds--dropdown--inline .cds--list-box__menu) {
-    left: -4rem;
+    left: -(layout.$spacing-10);
   }
 }
 

package/src/home/home-appointments.scss

@@ -1,4 +1,3 @@
-@use '@carbon/colors';
 @use '@carbon/layout';
 
 .container {

package/src/homepage-tile/appointments-tile.component.tsx

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

package/src/homepage-tile/appointments-tile.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/homepage-tile/appointments.resource.ts

@@ -0,0 +1,15 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import dayjs from 'dayjs';
+
+const useAppointmentsData = () => {
+  const appointmentDate = dayjs(new Date().setHours(0, 0, 0, 0)).toISOString();
+
+  const url = `${restBaseUrl}/appointment/all?forDate=${appointmentDate}`;
+
+  const { data, error, isLoading } = useSWR<{ data: Array<any> }>(url, openmrsFetch);
+
+  return { data: data?.data, error, isLoading };
+};
+
+export default useAppointmentsData;

package/src/hooks/useClinicalMetrics.ts

@@ -53,7 +53,7 @@ export function useAllAppointmentsByDate() {
   return {
     totalProviders: providersCount ? providersCount : 0,
     isLoading,
-    isError: error,
+    error,
     isValidating,
     mutate,
   };

package/src/hooks/useDefaultLocation.ts

@@ -9,6 +9,6 @@ export const useDefaultLoginLocation = () => {
   return {
     defaultFacility: data ? data?.data : null,
     isLoading: isLoading,
-    isError: error,
+    error,
   };
 };

package/src/hooks/usePatientAppointmentHistory.ts

@@ -42,7 +42,7 @@ export function usePatientAppointmentHistory(patientUuid: string) {
 
   return {
     appointmentsCount: { missedAppointments, completedAppointments, cancelledAppointments, upcomingAppointments },
-    isError: error,
+    error,
     isLoading,
     isValidating,
   };

package/src/hooks/useProviders.ts

@@ -12,7 +12,7 @@ export function useProviders() {
   return {
     providers: data ? data.data?.results : [],
     isLoading,
-    isError: error,
+    error,
     isValidating,
   };
 }

package/src/index.ts

@@ -109,3 +109,8 @@ export const endAppointmentModal = getAsyncLifecycle(
   () => import('./appointments/common-components/end-appointment.modal'),
   options,
 );
+
+export const homeAppointmentsTile = getAsyncLifecycle(
+  () => import('./homepage-tile/appointments-tile.component'),
+  options,
+);

package/src/metrics/appointments-metrics.scss

@@ -1,6 +1,5 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
-@use '@carbon/type';
 
 .cardContainer {
   background-color: colors.$white;

package/src/metrics/appointments-metrics.test.tsx

@@ -1,40 +1,38 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { openmrsFetch } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
 import { mockAppointmentMetrics, mockProvidersCount, mockStartTime } from '__mocks__';
 import AppointmentsMetrics from './appointments-metrics.component';
 
-const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 
-jest.mock('../hooks/useClinicalMetrics', () => {
-  const originalModule = jest.requireActual('../hooks/useClinicalMetrics');
-
-  return {
-    ...originalModule,
-    useClinicalMetrics: jest.fn().mockImplementation(() => ({
-      highestServiceLoad: mockAppointmentMetrics.highestServiceLoad,
-      isLoading: mockAppointmentMetrics.isLoading,
-      error: mockAppointmentMetrics.error,
-    })),
-    useAllAppointmentsByDate: jest.fn().mockImplementation(() => ({
-      totalProviders: mockProvidersCount.totalProviders,
-      isLoading: mockProvidersCount.isLoading,
-      error: mockProvidersCount.error,
-    })),
-    useScheduledAppointment: jest.fn().mockImplementation(() => ({
-      totalScheduledAppointments: mockAppointmentMetrics.totalAppointments,
-    })),
-    useAppointmentDate: jest.fn().mockImplementation(() => ({
-      startDate: mockStartTime.startTime,
-    })),
-  };
-});
+jest.mock('../hooks/useClinicalMetrics', () => ({
+  ...jest.requireActual('../hooks/useClinicalMetrics'),
+  useClinicalMetrics: jest.fn().mockReturnValue({
+    highestServiceLoad: mockAppointmentMetrics.highestServiceLoad,
+    isLoading: mockAppointmentMetrics.isLoading,
+    error: mockAppointmentMetrics.error,
+  }),
+  useAllAppointmentsByDate: jest.fn().mockReturnValue({
+    totalProviders: mockProvidersCount.totalProviders,
+    isLoading: mockProvidersCount.isLoading,
+    error: mockProvidersCount.error,
+  }),
+  useScheduledAppointment: jest.fn().mockReturnValue({
+    totalScheduledAppointments: mockAppointmentMetrics.totalAppointments,
+  }),
+  useAppointmentDate: jest.fn().mockReturnValue({
+    startDate: mockStartTime.startTime,
+  }),
+}));
 
 describe('Appointment metrics', () => {
   it('renders metrics from the appointments list', async () => {
-    mockedOpenmrsFetch.mockResolvedValue({ data: [] });
+    mockOpenmrsFetch.mockResolvedValueOnce({
+      data: [],
+    } as unknown as FetchResponse);
 
-    renderAppointmentMetrics();
+    render(<AppointmentsMetrics appointmentServiceType="consultation-service-uuid" />);
 
     await screen.findByText(/appointment metrics/i);
     expect(screen.getByText(/scheduled appointments/i)).toBeInTheDocument();
@@ -43,7 +41,3 @@ describe('Appointment metrics', () => {
     expect(screen.getByText(/4/i)).toBeInTheDocument();
   });
 });
-
-function renderAppointmentMetrics() {
-  render(<AppointmentsMetrics appointmentServiceType="consultation-service-uuid" />);
-}

package/src/metrics/metrics-card.component.tsx

@@ -1,41 +1,23 @@
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 dayjs.extend(isSameOrBefore);
 import isEmpty from 'lodash-es/isEmpty';
-import { ConfigurableLink } from '@openmrs/esm-framework';
-import { ArrowRight } from '@carbon/react/icons';
-import { basePath, spaHomePage } from '../constants';
 import styles from './metrics-card.scss';
+import SelectedDateContext from '../hooks/selectedDateContext';
 
 interface MetricsCardProps {
   label: string;
   value: number;
   headerLabel: string;
-  children?: React.ReactNode;
-  view?: string;
   count?: { pendingAppointments: Array<any>; arrivedAppointments: Array<any> };
-  appointmentDate?: string;
 }
 
-const MetricsCard: React.FC<MetricsCardProps> = ({
-  label,
-  value,
-  headerLabel,
-  children,
-  view,
-  count,
-  appointmentDate,
-}) => {
+const MetricsCard: React.FC<MetricsCardProps> = ({ label, value, headerLabel, count }) => {
   const { t } = useTranslation();
-  const isDateInPast = useMemo(() => !dayjs(appointmentDate).isBefore(dayjs(), 'date'), [appointmentDate]);
-
-  const metricsLink = {
-    patients: 'appointments-list/scheduled',
-    highVolume: 'appointments-list/high-volume-service',
-    providers: 'appointments-list/providers-link',
-  };
+  const { selectedDate } = useContext(SelectedDateContext);
+  const isSelectedDateInPast = useMemo(() => dayjs(selectedDate).isBefore(dayjs(), 'date'), [selectedDate]);
 
   return (
     <article className={styles.container}>
@@ -43,16 +25,7 @@ const MetricsCard: React.FC<MetricsCardProps> = ({
         <div className={styles.tileHeader}>
           <div className={styles.headerLabelContainer}>
             <label className={styles.headerLabel}>{headerLabel}</label>
-            {children}
           </div>
-          {view && (
-            <div className={styles.link}>
-              <ConfigurableLink className={styles.link} to={`${spaHomePage}${basePath}/${metricsLink[view]}`}>
-                <span style={{ fontSize: '0.825rem', marginRight: '0.325rem' }}>{t('view', 'View')}</span>{' '}
-                <ArrowRight size={16} className={styles.viewListBtn} />
-              </ConfigurableLink>
-            </div>
-          )}
         </div>
         <div className={styles.metricsGrid}>
           <div>
@@ -62,7 +35,7 @@ const MetricsCard: React.FC<MetricsCardProps> = ({
           {!isEmpty(count) && (
             <div className={styles.countGrid}>
               <span>{t('checkedIn', 'Checked in')}</span>
-              <span>{isDateInPast ? t('notArrived', 'Not arrived') : t('missed', 'Missed')}</span>
+              <span>{isSelectedDateInPast ? t('missed', 'Missed') : t('notArrived', 'Not arrived')}</span>
               <p style={{ color: '#319227' }}>{count.arrivedAppointments?.length}</p>
               <p style={{ color: '#da1e28' }}>{count.pendingAppointments?.length}</p>
             </div>

package/src/metrics/metrics-card.scss

@@ -1,7 +1,7 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
 @use '@carbon/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .container {
   flex-grow: 1;
@@ -10,7 +10,7 @@
 .tileContainer {
   border: 1px solid $ui-03;
   height: 7.875rem;
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
@@ -20,7 +20,7 @@
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .headerLabel {
@@ -61,9 +61,9 @@
   display: grid;
   grid-template-columns: 1fr 1fr;
   justify-self: flex-end;
-  column-gap: spacing.$spacing-03;
-  row-gap: spacing.$spacing-03;
-  margin: spacing.$spacing-03;
+  column-gap: layout.$spacing-03;
+  row-gap: layout.$spacing-03;
+  margin: layout.$spacing-03;
 
   & > span {
     font-size: 0.625rem !important;

package/src/metrics/metrics-header.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .metricsContainer {
   display: flex;

package/src/past-visit/past-visit.component.tsx

@@ -25,7 +25,7 @@ export interface FormattedEncounter {
 
 const PastVisit: React.FC<PastVisitProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
-  const { data: pastVisits, isError, isLoading } = usePastVisits(patientUuid);
+  const { data: pastVisits, error, isLoading } = usePastVisits(patientUuid);
   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
   const isTablet = useLayoutType() === 'tablet';
 

package/src/past-visit/past-visit.resource.ts

@@ -18,7 +18,7 @@ export function usePastVisits(patientUuid: string) {
 
   return {
     data: data ? data.data.results : null,
-    isError: error,
+    error,
     isLoading,
     isValidating,
   };

package/src/past-visit/past-visit.scss

@@ -1,9 +1,9 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .wrapper {
-  margin-top: 0.5rem;
+  margin-top: layout.$spacing-03;
 }
 
 .bodyShort02 {
@@ -17,7 +17,7 @@
 .date {
   @include type.type-style('label-01');
   color: $text-02;
-  margin: 0.5rem 0rem 0.25rem;
+  margin: layout.$spacing-03 0 layout.$spacing-02;
 }
 
 .visitType {
@@ -27,19 +27,19 @@
 .container {
   background-color: $ui-background;
   border: 1px solid $grey-2;
-  padding: spacing.$spacing-05;
-  margin: spacing.$spacing-05 0rem spacing.$spacing-05;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-05 0 layout.$spacing-05;
   width: 100%;
 }
 
 .tabs > :global(.cds--tab-content) {
-  padding: spacing.$spacing-05 0rem !important;
+  padding: layout.$spacing-05 0 !important;
 }
 
 .header::after {
   content: '';
   display: block;
-  width: spacing.$spacing-07;
+  width: layout.$spacing-07;
   padding-top: 0.188rem;
   border-bottom: 0.375rem solid var(--brand-03);
 }
@@ -55,10 +55,10 @@
 }
 
 .verticalTabs {
-  margin: spacing.$spacing-04 0;
+  margin: layout.$spacing-04 0;
 
   &:global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item + .cds--tabs--scrollable__nav-item) {
-    margin-left: 0rem;
+    margin-left: 0;
   }
 }
 
@@ -68,13 +68,13 @@
 
 .desktopTabs {
   button {
-    height: 32px;
+    height: layout.$spacing-07;
   }
 }
 
 .tabletTabs {
   button {
-    height: 48px;
+    height: layout.$spacing-09;
   }
 }
 
@@ -98,9 +98,14 @@
 
 .tabContent {
   border-top: 1px solid $ui-03;
-  padding: spacing.$spacing-05 0;
+  padding: layout.$spacing-05 0;
   width: 70%;
 }
+
 .textColor {
   color: $color-blue-60-2;
 }
+
+.text02 {
+  color: $text-02;
+}

package/src/patient-appointments/patient-appointments-action-menu.scss

@@ -1,3 +1,5 @@
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
 .layer {
   height: 100%;
 }
@@ -5,3 +7,7 @@
 .menuItem {
   max-width: none;
 }
+
+.text02 {
+  color: $text-02;
+}

package/src/patient-appointments/patient-appointments-base.component.tsx

@@ -1,12 +1,12 @@
 import React, { useContext, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
 import { Button, ContentSwitcher, DataTableSkeleton, InlineLoading, Layer, Switch, Tile } from '@carbon/react';
 import { Add } from '@carbon/react/icons';
 import { launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
 import { CardHeader, EmptyDataIllustration, ErrorState, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import { usePatientAppointments } from './patient-appointments.resource';
-import PatientAppointmentsTable from './patient-appointments-table';
+import PatientAppointmentsTable from './patient-appointments-table.component';
 import styles from './patient-appointments-base.scss';
 
 import PatientAppointmentContext, { PatientAppointmentContextTypes } from '../hooks/patientAppointmentContext';
@@ -32,7 +32,7 @@ const PatientAppointmentsBase: React.FC<PatientAppointmentsBaseProps> = ({ patie
   const startDate = dayjs(new Date().toISOString()).subtract(6, 'month').toISOString();
   const {
     data: appointmentsData,
-    isError,
+    error,
     isLoading,
     isValidating,
   } = usePatientAppointments(patientUuid, startDate, new AbortController());
@@ -49,10 +49,10 @@ const PatientAppointmentsBase: React.FC<PatientAppointmentsBaseProps> = ({ patie
   };
 
   if (isLoading) return <DataTableSkeleton role="progressbar" compact={!isTablet} zebra />;
-  if (isError) {
-    return <ErrorState headerTitle={headerTitle} error={isError} />;
+  if (error) {
+    return <ErrorState headerTitle={headerTitle} error={error} />;
   }
-  if (Object.keys(appointmentsData)?.length) {
+  if (appointmentsData && Object.keys(appointmentsData)?.length) {
     return (
       <div className={styles.widgetCard}>
         <CardHeader title={headerTitle}>