@openmrs/esm-appointments-app 8.2.2-pre.4806 → 8.2.2-pre.4812

package/dist/openmrs-esm-appointments-app.js.buildmanifest.json

@@ -76,7 +76,7 @@
       "auxiliaryFiles": [
         "main.js.map"
       ],
-      "hash": "47e9afa204692480",
+      "hash": "324564b6857fa239",
       "childrenByOrder": {}
     },
     {
@@ -143,7 +143,7 @@
       "auxiliaryFiles": [
         "310.js.map"
       ],
-      "hash": "5522307347b4a404",
+      "hash": "cc3dbaaa3697652a",
       "childrenByOrder": {}
     },
     {
@@ -194,7 +194,7 @@
       "auxiliaryFiles": [
         "529.js.map"
       ],
-      "hash": "45b7b6ad2ffc8312",
+      "hash": "1204bd6eb44a653c",
       "childrenByOrder": {}
     },
     {
@@ -241,7 +241,7 @@
       "auxiliaryFiles": [
         "646.js.map"
       ],
-      "hash": "603c3b66f3a0ec2d",
+      "hash": "236f43bea98d5898",
       "childrenByOrder": {}
     },
     {
@@ -250,9 +250,9 @@
       "entry": false,
       "recorded": false,
       "reason": "split chunk (cache group: default)",
-      "size": 68064,
+      "size": 68137,
       "sizes": {
-        "javascript": 68064
+        "javascript": 68137
       },
       "names": [],
       "idHints": [],
@@ -266,7 +266,7 @@
       "auxiliaryFiles": [
         "681.js.map"
       ],
-      "hash": "6bf67281ff24bf8d",
+      "hash": "562e30022ae30ad0",
       "childrenByOrder": {}
     },
     {
@@ -486,9 +486,9 @@
       "entry": false,
       "recorded": false,
       "reason": "reused as split chunk (cache group: default)",
-      "size": 167248,
+      "size": 166608,
       "sizes": {
-        "javascript": 167248
+        "javascript": 166608
       },
       "names": [],
       "idHints": [],
@@ -502,7 +502,7 @@
       "auxiliaryFiles": [
         "2753.js.map"
       ],
-      "hash": "0526b3b117252c2a",
+      "hash": "f4d4088863422ff7",
       "childrenByOrder": {}
     },
     {
@@ -572,7 +572,7 @@
       "auxiliaryFiles": [
         "2923.js.map"
       ],
-      "hash": "1c63e5781604a9c4",
+      "hash": "6eaac8a3845d5031",
       "childrenByOrder": {}
     },
     {
@@ -581,9 +581,9 @@
       "entry": false,
       "recorded": false,
       "reason": "split chunk (cache group: default)",
-      "size": 134784,
+      "size": 137732,
       "sizes": {
-        "javascript": 134784
+        "javascript": 137732
       },
       "names": [],
       "idHints": [],
@@ -597,7 +597,7 @@
       "auxiliaryFiles": [
         "3260.js.map"
       ],
-      "hash": "2d4ea01b6e6c4fe7",
+      "hash": "7ca1610aacfa1c8d",
       "childrenByOrder": {}
     },
     {
@@ -629,9 +629,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 6545,
+      "size": 6619,
       "sizes": {
-        "javascript": 6545
+        "javascript": 6619
       },
       "names": [],
       "idHints": [],
@@ -643,7 +643,7 @@
         "3574.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "2bacc9d49359e79b",
+      "hash": "122d890a7300d845",
       "childrenByOrder": {}
     },
     {
@@ -667,7 +667,7 @@
       "auxiliaryFiles": [
         "3581.js.map"
       ],
-      "hash": "cca678716be7f710",
+      "hash": "5515b477ae0e84ac",
       "childrenByOrder": {}
     },
     {
@@ -742,9 +742,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 7604,
+      "size": 7829,
       "sizes": {
-        "javascript": 7604
+        "javascript": 7829
       },
       "names": [],
       "idHints": [],
@@ -758,7 +758,7 @@
       "auxiliaryFiles": [
         "3952.js.map"
       ],
-      "hash": "7c2705618fe60645",
+      "hash": "0664f1260b8f005c",
       "childrenByOrder": {}
     },
     {
@@ -1074,7 +1074,7 @@
       "auxiliaryFiles": [
         "5910.js.map"
       ],
-      "hash": "6f1be25d29e57082",
+      "hash": "638eb1a87faa2f41",
       "childrenByOrder": {}
     },
     {
@@ -1140,7 +1140,7 @@
       "auxiliaryFiles": [
         "6179.js.map"
       ],
-      "hash": "36e9ef89c72bc1ec",
+      "hash": "d81a6bf0c71d664a",
       "childrenByOrder": {}
     },
     {
@@ -1312,33 +1312,6 @@
       "hash": "71388d7a2d62d9b3",
       "childrenByOrder": {}
     },
-    {
-      "rendered": true,
-      "initial": false,
-      "entry": false,
-      "recorded": false,
-      "reason": "split chunk (cache group: defaultVendors)",
-      "size": 2766488,
-      "sizes": {
-        "javascript": 2766488
-      },
-      "names": [],
-      "idHints": [
-        "vendors"
-      ],
-      "runtime": [
-        "@openmrs/esm-appointments-app",
-        "main"
-      ],
-      "files": [
-        "8199.js"
-      ],
-      "auxiliaryFiles": [
-        "8199.js.map"
-      ],
-      "hash": "c372b981c3e0c247",
-      "childrenByOrder": {}
-    },
     {
       "rendered": true,
       "initial": false,
@@ -1437,9 +1410,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 2166,
+      "size": 2391,
       "sizes": {
-        "javascript": 2166
+        "javascript": 2391
       },
       "names": [],
       "idHints": [],
@@ -1453,7 +1426,34 @@
       "auxiliaryFiles": [
         "8607.js.map"
       ],
-      "hash": "ca5ea82f827a6124",
+      "hash": "05250d2611fbeb76",
+      "childrenByOrder": {}
+    },
+    {
+      "rendered": true,
+      "initial": false,
+      "entry": false,
+      "recorded": false,
+      "reason": "split chunk (cache group: defaultVendors)",
+      "size": 2747132,
+      "sizes": {
+        "javascript": 2747132
+      },
+      "names": [],
+      "idHints": [
+        "vendors"
+      ],
+      "runtime": [
+        "@openmrs/esm-appointments-app",
+        "main"
+      ],
+      "files": [
+        "8615.js"
+      ],
+      "auxiliaryFiles": [
+        "8615.js.map"
+      ],
+      "hash": "490b9a5cbee87430",
       "childrenByOrder": {}
     },
     {
@@ -1553,7 +1553,7 @@
       "auxiliaryFiles": [
         "9190.js.map"
       ],
-      "hash": "d5bd64f357d15e83",
+      "hash": "4d76c8a34af8a0f4",
       "childrenByOrder": {}
     },
     {
@@ -1599,7 +1599,7 @@
       "auxiliaryFiles": [
         "9269.js.map"
       ],
-      "hash": "72bc4a4443a32860",
+      "hash": "b24bdb573a29497d",
       "childrenByOrder": {}
     },
     {
@@ -1717,7 +1717,7 @@
       "auxiliaryFiles": [
         "9890.js.map"
       ],
-      "hash": "9926c3a2bda44fcd",
+      "hash": "5b07c240725e2ac4",
       "childrenByOrder": {}
     }
   ]

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"extensions":[{"name":"home-appointments","slot":"homepage-widgets-slot","component":"homeAppointments","order":1},{"name":"clinical-appointments-dashboard-link","slot":"homepage-dashboard-slot","component":"appointmentsDashboardLink","meta":{"name":"appointments","slot":"clinical-appointments-dashboard-slot","title":"Appointments"}},{"component":"root","name":"clinical-appointments-dashboard","slot":"clinical-appointments-dashboard-slot"},{"name":"appointments-calendar-dashboard-link","slot":"calendar-dashboard-slot","component":"appointmentsCalendarDashboardLink"},{"name":"todays-appointments-dashboard","slot":"todays-appointment-slot","component":"homeAppointments"},{"name":"expected-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"checked-in-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"completed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"missed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"cancelled-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"early-appointments-panel","component":"earlyAppointments"},{"name":"appointments-form-workspace","component":"appointmentsFormWorkspace","meta":{"title":{"key":"createNewAppointment","default":"Create new appointment"}}},{"name":"patient-appointments-summary-dashboard","component":"patientAppointmentsSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"hideDashboardTitle":true,"path":"Appointments","slot":"patient-chart-appointments-dashboard-slot","title":"Appointments"}},{"name":"patientAppointments-details-widget","component":"patientAppointmentsDetailedSummary","slot":"patient-chart-appointments-dashboard-slot","meta":{"columnSpan":1}},{"name":"patient-upcoming-appointment-widget","component":"patientUpcomingAppointmentsWidget","slot":"visit-form-top-slot"},{"name":"edit-appointments-form","component":"appointmentsForm","meta":{"title":{"key":"editAppointment","default":"Edit Appointment"}}},{"name":"search-patient","component":"searchPatient"},{"name":"create-appointment","component":"appointmentsForm","meta":{"title":{"key":"appointmentForm","default":"Appointment Form"}}},{"name":"add-appointment","component":"appointmentsForm","meta":{"title":{"key":"createNewAppointment","default":"Create new appointment"}}},{"name":"home-appointments-tile","slot":"home-metrics-tiles-slot","component":"homeAppointmentsTile"}],"modals":[{"name":"end-appointment-modal","component":"endAppointmentModal"},{"name":"patient-appointment-cancel-confirmation-dialog","component":"patientAppointmentsCancelConfirmationDialog"}],"version":"8.2.2-pre.4806"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"extensions":[{"name":"home-appointments","slot":"homepage-widgets-slot","component":"homeAppointments","order":1},{"name":"clinical-appointments-dashboard-link","slot":"homepage-dashboard-slot","component":"appointmentsDashboardLink","meta":{"name":"appointments","slot":"clinical-appointments-dashboard-slot","title":"Appointments"}},{"component":"root","name":"clinical-appointments-dashboard","slot":"clinical-appointments-dashboard-slot"},{"name":"appointments-calendar-dashboard-link","slot":"calendar-dashboard-slot","component":"appointmentsCalendarDashboardLink"},{"name":"todays-appointments-dashboard","slot":"todays-appointment-slot","component":"homeAppointments"},{"name":"expected-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"checked-in-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"completed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"missed-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"cancelled-appointments-panel","slot":"scheduled-appointments-panels-slot","component":"appointmentsList"},{"name":"early-appointments-panel","component":"earlyAppointments"},{"name":"appointments-form-workspace","component":"appointmentsFormWorkspace","meta":{"title":{"key":"createNewAppointment","default":"Create new appointment"}}},{"name":"patient-appointments-summary-dashboard","component":"patientAppointmentsSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"hideDashboardTitle":true,"path":"Appointments","slot":"patient-chart-appointments-dashboard-slot","title":"Appointments"}},{"name":"patientAppointments-details-widget","component":"patientAppointmentsDetailedSummary","slot":"patient-chart-appointments-dashboard-slot","meta":{"columnSpan":1}},{"name":"patient-upcoming-appointment-widget","component":"patientUpcomingAppointmentsWidget","slot":"visit-form-top-slot"},{"name":"edit-appointments-form","component":"appointmentsForm","meta":{"title":{"key":"editAppointment","default":"Edit Appointment"}}},{"name":"search-patient","component":"searchPatient"},{"name":"create-appointment","component":"appointmentsForm","meta":{"title":{"key":"appointmentForm","default":"Appointment Form"}}},{"name":"add-appointment","component":"appointmentsForm","meta":{"title":{"key":"createNewAppointment","default":"Create new appointment"}}},{"name":"home-appointments-tile","slot":"home-metrics-tiles-slot","component":"homeAppointmentsTile"}],"modals":[{"name":"end-appointment-modal","component":"endAppointmentModal"},{"name":"patient-appointment-cancel-confirmation-dialog","component":"patientAppointmentsCancelConfirmationDialog"}],"version":"8.2.2-pre.4812"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-appointments-app",
-  "version": "8.2.2-pre.4806",
+  "version": "8.2.2-pre.4812",
   "description": "Appointments front-end module for O3",
   "browser": "dist/openmrs-esm-appointments-app.js",
   "main": "src/index.ts",

package/src/appointments/appointment-tabs.component.tsx

@@ -8,7 +8,7 @@ import UnscheduledAppointments from './unscheduled/unscheduled-appointments.comp
 import styles from './appointment-tabs.scss';
 
 interface AppointmentTabsProps {
-  appointmentServiceType: string;
+  appointmentServiceType: string[];
 }
 
 const AppointmentTabs: React.FC<AppointmentTabsProps> = ({ appointmentServiceType }) => {

package/src/appointments/common-components/appointments-table.component.tsx

@@ -53,9 +53,15 @@ interface AppointmentsTableProps {
   appointments: Array<Appointment>;
   isLoading: boolean;
   tableHeading: string;
+  hasActiveFilters?: boolean;
 }
 
-const AppointmentsTable: React.FC<AppointmentsTableProps> = ({ appointments, isLoading, tableHeading }) => {
+const AppointmentsTable: React.FC<AppointmentsTableProps> = ({
+  appointments,
+  isLoading,
+  tableHeading,
+  hasActiveFilters,
+}) => {
   const { t } = useTranslation();
   const [pageSize, setPageSize] = useState(25);
   const [searchString, setSearchString] = useState('');
@@ -113,6 +119,21 @@ const AppointmentsTable: React.FC<AppointmentsTableProps> = ({ appointments, isL
     return <DataTableSkeleton role="progressbar" row={5} />;
   }
 
+  if (hasActiveFilters && !appointments?.length) {
+    return (
+      <div className={styles.filterEmptyState}>
+        <Layer level={0}>
+          <Tile className={styles.filterEmptyStateTile}>
+            <p className={styles.filterEmptyStateContent}>
+              {t('noMatchingAppointments', 'No matching appointments found')}
+            </p>
+            <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
+          </Tile>
+        </Layer>
+      </div>
+    );
+  }
+
   if (!appointments?.length) {
     return (
       <EmptyState

package/src/appointments/common-components/appointments-table.scss

@@ -131,3 +131,29 @@ html[dir='rtl'] {
     }
   }
 }
+
+.filterEmptyState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: layout.$spacing-05 0;
+  padding: layout.$spacing-08 0;
+  text-align: center;
+  border: 1px solid $ui-03;
+}
+
+.filterEmptyStateTile {
+  margin: auto;
+  width: fit-content;
+}
+
+.filterEmptyStateContent {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-03;
+}
+
+.filterEmptyStateHelper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}

package/src/appointments/scheduled/appointments-list.component.tsx

@@ -4,7 +4,7 @@ import { useAppointmentList } from '../../hooks/useAppointmentList';
 import AppointmentsTable from '../common-components/appointments-table.component';
 
 interface AppointmentsListProps {
-  appointmentServiceType?: string;
+  appointmentServiceType?: string[];
   status?: string;
   title: string;
   date: string;
@@ -27,7 +27,14 @@ const AppointmentsList: React.FC<AppointmentsListProps> = ({
   const activeAppointments = filterCancelled
     ? appointments.filter((appointment) => appointment.status !== 'Cancelled')
     : appointments;
-  return <AppointmentsTable appointments={activeAppointments} isLoading={isLoading} tableHeading={title} />;
+  return (
+    <AppointmentsTable
+      appointments={activeAppointments}
+      isLoading={isLoading}
+      tableHeading={title}
+      hasActiveFilters={appointmentServiceType?.length > 0 || filterCancelled}
+    />
+  );
 };
 
 export default AppointmentsList;

package/src/appointments/scheduled/early-appointments.component.tsx

@@ -5,7 +5,7 @@ import AppointmentsTable from '../common-components/appointments-table.component
 import { useTranslation } from 'react-i18next';
 
 interface EarlyAppointmentsProps {
-  appointmentServiceType?: string;
+  appointmentServiceType?: string[];
   date: string;
 }
 

package/src/appointments/scheduled/scheduled-appointments.component.tsx

@@ -18,7 +18,7 @@ import styles from './scheduled-appointments.scss';
 dayjs.extend(isSameOrBefore);
 
 interface ScheduledAppointmentsProps {
-  appointmentServiceType?: string;
+  appointmentServiceType?: string[];
 }
 
 type DateType = 'pastDate' | 'today' | 'futureDate';
@@ -141,7 +141,7 @@ function ExtensionWrapper({
 }: {
   extension: ConnectedExtension;
   currentTab: string;
-  appointmentServiceType: string;
+  appointmentServiceType: string[];
   date: string;
   dateType: DateType;
   showExtensionTab: (extension: string) => void;

package/src/appointments/utils.tsx

@@ -73,8 +73,8 @@ export function useAppointmentSearchResults(data: Appointment[], searchString: s
   }, [searchString, data]);
 }
 
-export function filterByServiceType(appointmentList: any[], appointmentServiceType: string) {
-  return appointmentServiceType
-    ? appointmentList.filter(({ service }) => service?.uuid === appointmentServiceType)
+export function filterByServiceType(appointmentList: any[], appointmentServiceType: string[]) {
+  return appointmentServiceType?.length > 0
+    ? appointmentList.filter(({ service }) => appointmentServiceType.includes(service.uuid))
     : appointmentList;
 }

package/src/appointments.component.tsx

@@ -10,7 +10,7 @@ import SelectedDateContext from './hooks/selectedDateContext';
 
 const Appointments: React.FC = () => {
   const { t } = useTranslation();
-  const [appointmentServiceType, setAppointmentServiceType] = useState('');
+  const [appointmentServiceType, setAppointmentServiceType] = useState<string[]>([]);
   const [selectedDate, setSelectedDate] = useState(dayjs().startOf('day').format(omrsDateFormat));
 
   const params = useParams();
@@ -23,7 +23,7 @@ const Appointments: React.FC = () => {
 
   useEffect(() => {
     if (params.serviceType) {
-      setAppointmentServiceType(params.serviceType);
+      setAppointmentServiceType([params.serviceType]);
     }
   }, [params.serviceType]);
 

package/src/appointments.test.tsx

@@ -11,12 +11,7 @@ describe('Appointments', () => {
 
     expect(screen.getByRole('button', { name: /appointments calendar/i })).toBeInTheDocument();
     expect(screen.getByPlaceholderText(/dd-mmm-yyyy/i)).toBeInTheDocument();
-    expect(
-      screen.getByRole('combobox', {
-        name: /select service type/i,
-      }),
-    ).toBeInTheDocument();
-    expect(screen.getByRole('listbox', { name: /view/i })).toBeInTheDocument();
+    expect(screen.getByText(/filter appointments by service type/i)).toBeInTheDocument();
     expect(screen.getByText(/appointment metrics/i)).toBeInTheDocument();
     expect(screen.getByText(/scheduled appointments/i)).toBeInTheDocument();
     expect(screen.getByText(/highest volume service/i)).toBeInTheDocument();

package/src/header/appointments-header.component.tsx

@@ -1,7 +1,7 @@
-import React, { useContext } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
-import { DatePicker, DatePickerInput, Dropdown } from '@carbon/react';
+import { DatePicker, DatePickerInput, MultiSelect } from '@carbon/react';
 import { PageHeader, PageHeaderContent, AppointmentsPictogram } from '@openmrs/esm-framework';
 import { omrsDateFormat } from '../constants';
 import { useAppointmentServices } from '../hooks/useAppointmentService';
@@ -10,7 +10,7 @@ import styles from './appointments-header.scss';
 
 interface AppointmentHeaderProps {
   title: string;
-  appointmentServiceType?: string;
+  appointmentServiceType?: string[];
   onChange?: (evt) => void;
 }
 
@@ -19,6 +19,22 @@ const AppointmentsHeader: React.FC<AppointmentHeaderProps> = ({ title, appointme
   const { selectedDate, setSelectedDate } = useContext(SelectedDateContext);
   const { serviceTypes } = useAppointmentServices();
 
+  const [selectedItems, setSelectedItems] = useState([]);
+
+  const handleMultiSelectChange = useCallback(
+    ({ selectedItems }) => {
+      const selectedUuids = selectedItems.map((item) => item.id);
+      setSelectedItems(selectedUuids);
+      onChange?.(selectedUuids);
+    },
+    [onChange],
+  );
+
+  const serviceTypeOptions = useMemo(
+    () => serviceTypes?.map((item) => ({ id: item.uuid, label: item.name })) ?? [],
+    [serviceTypes],
+  );
+
   return (
     <PageHeader className={styles.header} data-testid="appointments-header">
       <PageHeaderContent illustration={<AppointmentsPictogram />} title={title} />
@@ -37,20 +53,13 @@ const AppointmentsHeader: React.FC<AppointmentHeaderProps> = ({ title, appointme
           />
         </DatePicker>
         {typeof onChange === 'function' && (
-          <Dropdown
-            aria-label={t('selectServiceType', 'Select service type')}
-            className={styles.dropdown}
-            direction="bottom"
-            id="serviceDropdown"
-            items={[{ name: 'All', uuid: '' }, ...serviceTypes]}
-            itemToString={(item) => (item ? item.name : '')}
-            label={t('selectServiceType', 'Select service type')}
-            onChange={({ selectedItem }) => onChange(selectedItem?.uuid)}
-            selectedItem={
-              serviceTypes.find((service) => service.uuid === appointmentServiceType) || { name: 'All', uuid: '' }
-            }
-            size="sm"
-            titleText={t('view', 'View')}
+          <MultiSelect
+            id="serviceTypeMultiSelect"
+            label={t('filterAppointmentsByServiceType', 'Filter appointments by service type')}
+            items={serviceTypeOptions}
+            itemToString={(item) => (item ? item.label : '')}
+            onChange={handleMultiSelectChange}
+            initialSelectedItems={serviceTypeOptions.length > 0 ? [serviceTypeOptions[0].id] : []}
             type="inline"
           />
         )}

package/src/header/appointments-header.scss

@@ -22,17 +22,6 @@
   row-gap: layout.$spacing-01;
 }
 
-.dropdown {
-  :global(.cds--list-box__field) {
-    width: 14rem;
-    overflow: hidden;
-  }
-
-  :global(.cds--dropdown--inline .cds--list-box__menu) {
-    left: -(layout.$spacing-10);
-  }
-}
-
 // Overriding styles for RTL support
 html[dir='rtl'] {
   .date-and-location {

package/src/hooks/useClinicalMetrics.ts

@@ -61,7 +61,7 @@ export function useAllAppointmentsByDate() {
   };
 }
 
-export const useScheduledAppointment = (serviceUuid: string) => {
+export const useScheduledAppointment = (serviceUuid: string[]) => {
   const { selectedDate } = useContext(SelectedDateContext);
   const url = `${restBaseUrl}/appointment/all?forDate=${selectedDate}`;
 
@@ -70,7 +70,7 @@ export const useScheduledAppointment = (serviceUuid: string) => {
   }>(url, openmrsFetch);
 
   const totalScheduledAppointments = !isEmpty(serviceUuid)
-    ? data?.data?.filter((appt) => appt?.service?.uuid === serviceUuid)?.length ?? 0
+    ? data?.data?.filter((appt) => serviceUuid.includes(appt?.service?.uuid))?.length ?? 0
     : data?.data?.length ?? 0;
 
   return {

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

@@ -9,7 +9,7 @@ import styles from './appointments-metrics.scss';
 import SelectedDateContext from '../hooks/selectedDateContext';
 
 interface AppointmentMetricsProps {
-  appointmentServiceType: string;
+  appointmentServiceType: string[];
 }
 
 const AppointmentsMetrics: React.FC<AppointmentMetricsProps> = ({ appointmentServiceType }) => {
@@ -27,10 +27,10 @@ const AppointmentsMetrics: React.FC<AppointmentMetricsProps> = ({ appointmentSer
   const { appointmentList: pendingAppointments } = useAppointmentList('Scheduled');
 
   const filteredArrivedAppointments = appointmentServiceType
-    ? arrivedAppointments.filter(({ service }) => service.uuid === appointmentServiceType)
+    ? arrivedAppointments.filter(({ service }) => appointmentServiceType.includes(service.uuid))
     : arrivedAppointments;
   const filteredPendingAppointments = appointmentServiceType
-    ? pendingAppointments.filter(({ service }) => service.uuid === appointmentServiceType)
+    ? pendingAppointments.filter(({ service }) => appointmentServiceType.includes(service.uuid))
     : pendingAppointments;
 
   if (error) {

package/translations/en.json

@@ -89,6 +89,7 @@
   "endTime": "End Time",
   "errorCreatingAppointmentService": "Error creating appointment service",
   "expected": "Expected",
+  "filterAppointmentsByServiceType": "Filter appointments by service type",
   "filterTable": "Filter table",
   "gender": "Gender",
   "highestServiceVolume": "Highest volume service: {{time}}",
@@ -108,6 +109,7 @@
   "noContent": "No Content",
   "noCurrentAppointments": "There are no appointments scheduled for today to display for this patient",
   "noEncountersFound": "No encounters found",
+  "noMatchingAppointments": "No matching appointments found",
   "noPastAppointments": "There are no past appointments to display for this patient",
   "noPreviousVisitFound": "No previous visit found",
   "notArrived": "Not arrived",
@@ -143,7 +145,6 @@
   "selectOption": "Select an option",
   "selectProvider": "Select a provider",
   "selectService": "Select a service",
-  "selectServiceType": "Select service type",
   "service": "Service",
   "serviceName": "Service name",
   "serviceType": "Service Type",
@@ -161,7 +162,6 @@
   "upcoming": "Upcoming",
   "upcomingAppointments": "Upcoming appointments",
   "updateError": "Error updating upcoming appointment",
-  "view": "View",
   "vitals": "Vitals",
   "week": "Week",
   "yes": "Yes"