Merge branch 'ward-pagination' into mother

README.md

@@ -182,3 +182,14 @@ should be the version number (e.g., `3.2.1`). The creation of the GitHub release
 will cause GitHub Actions to publish the packages, completing the release process.
 
 > Don't run `npm publish` or `yarn publish`. Use the above process.
+
+### Bumping the Common Lib version
+
+Make sure to bump the Common Lib version used here each time you cut a release of Patient Chart. Because Common Lib is marked as a peer dependency and a Webpack module federation shared dependency in the [Appointments app](packages/esm-appointments-app/package.json), the copy of the Common Lib that the framework loads is the first one that gets loaded at runtime when frontend modules are registered. If this happens to be a different version than what the Patient Chart expects, you might get some unexpected behavior in the Patient Chart. You can bump the Common Lib version by running the following command:
+
+```sh
+yarn up @openmrs/esm-patient-common-lib
+git checkout package.json
+yarn
+```
+

packages/esm-appointments-app/package.json

@@ -44,7 +44,7 @@
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "5.x",
-    "@openmrs/esm-patient-common-lib": "7.x",
+    "@openmrs/esm-patient-common-lib": "8.x",
     "react": "18.x",
     "react-i18next": "11.x",
     "react-router-dom": "6.x",

packages/esm-appointments-app/src/calendar/header/calendar-header.component.tsx

@@ -19,6 +19,7 @@ const CalendarHeader: React.FC = () => {
     <div className={styles.calendarHeaderContainer}>
       <div className={styles.titleContainer}>
         <Button
+          className={styles.backButton}
           kind="ghost"
           onClick={backButtonOnClick}
           renderIcon={ArrowLeft}

packages/esm-appointments-app/src/calendar/header/calendar-header.scss

@@ -24,6 +24,18 @@
   align-items: center;
 }
 
+.backButton {
+  svg {
+    order: 1;
+    margin-right: layout.$spacing-03;
+    margin-left: 0 !important;
+  }
+
+  span {
+    order: 2;
+  }
+}
+
 // Overriding styles for RTL support
 html[dir='rtl'] {
   .titleContent {

packages/esm-appointments-app/src/calendar/monthly/days-of-week.component.tsx

@@ -1,15 +1,17 @@
-import dayjs from 'dayjs';
 import React from 'react';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
 import styles from './days-of-week.scss';
 
-interface DaysOfWeekProp {
+interface DaysOfWeekProps {
   dayOfWeek: string;
 }
-const DaysOfWeekCard: React.FC<DaysOfWeekProp> = ({ dayOfWeek }) => {
+
+const DaysOfWeekCard: React.FC<DaysOfWeekProps> = ({ dayOfWeek }) => {
   const isToday = dayjs(new Date()).format('ddd').toUpperCase() === dayOfWeek;
   return (
     <div tabIndex={0} role="button" className={styles.tileContainer}>
-      <span className={isToday ? styles.bold : ''}>{dayOfWeek}</span>
+      <span className={classNames({ [styles.bold]: isToday })}>{dayOfWeek}</span>
     </div>
   );
 };

packages/esm-appointments-app/src/calendar/monthly/days-of-week.scss

@@ -10,6 +10,11 @@
   width: 100%;
   align-items: center;
   border: 1px solid colors.$gray-20;
+  border-right: none;
+
+  &:last-child {
+    border-right: 1px solid colors.$gray-20;
+  }
 
   & > span {
     font-size: layout.$spacing-05;

packages/esm-appointments-app/src/calendar/monthly/monthly-calendar-view.component.tsx

@@ -4,9 +4,9 @@ import isBetween from 'dayjs/plugin/isBetween';
 import { type DailyAppointmentsCountByService } from '../../types';
 import { monthDays } from '../../helpers';
 import MonthlyViewWorkload from './monthly-workload-view.component';
-import MonthlyHeader from './monthly-header.module';
-import styles from '../appointments-calendar-view-view.scss';
+import MonthlyHeader from './monthly-header.component';
 import SelectedDateContext from '../../hooks/selectedDateContext';
+import styles from '../appointments-calendar-view-view.scss';
 
 dayjs.extend(isBetween);
 

packages/esm-appointments-app/src/calendar/monthly/monthly-header.component.tsx

@@ -0,0 +1,49 @@
+import React, { useCallback, useContext } from 'react';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { formatDate } from '@openmrs/esm-framework';
+import { omrsDateFormat } from '../../constants';
+import DaysOfWeekCard from './days-of-week.component';
+import SelectedDateContext from '../../hooks/selectedDateContext';
+import styles from './monthly-header.scss';
+
+const DAYS_IN_WEEK = ['SUN', 'MON', 'TUE', 'WED', 'THUR', 'FRI', 'SAT'];
+
+const MonthlyHeader: React.FC = () => {
+  const { t } = useTranslation();
+  const { selectedDate, setSelectedDate } = useContext(SelectedDateContext);
+
+  const handleSelectPrevMonth = useCallback(() => {
+    setSelectedDate(dayjs(selectedDate).subtract(1, 'month').format(omrsDateFormat));
+  }, [selectedDate, setSelectedDate]);
+
+  const handleSelectNextMonth = useCallback(() => {
+    setSelectedDate(dayjs(selectedDate).add(1, 'month').format(omrsDateFormat));
+  }, [selectedDate, setSelectedDate]);
+
+  return (
+    <>
+      <div className={styles.container}>
+        <Button
+          aria-label={t('previousMonth', 'Previous month')}
+          kind="tertiary"
+          onClick={handleSelectPrevMonth}
+          size="sm">
+          {t('prev', 'Prev')}
+        </Button>
+        <span>{formatDate(new Date(selectedDate), { day: false, time: false, noToday: true })}</span>
+        <Button aria-label={t('nextMonth', 'Next month')} kind="tertiary" onClick={handleSelectNextMonth} size="sm">
+          {t('next', 'Next')}
+        </Button>
+      </div>
+      <div className={styles.workLoadCard}>
+        {DAYS_IN_WEEK.map((day) => (
+          <DaysOfWeekCard key={day} dayOfWeek={day} />
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default MonthlyHeader;

packages/esm-appointments-app/src/calendar/monthly/monthly-view-workload.scss

@@ -13,10 +13,6 @@
   text-align: right;
   @include type.type-style('body-compact-02');
 
-  &:nth-child(-n + 7) {
-    border-top: 1px solid colors.$gray-20;
-  }
-
   &:nth-child(7n) {
     border-right: 1px solid colors.$gray-20;
   }

packages/esm-appointments-app/src/form/appointments-form.component.tsx

@@ -181,11 +181,22 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
     )
     .refine(
       (formValues) => {
-        const appointmentDate = formValues.appointmentDateTime?.startDate;
-        const dateAppointmentScheduled = formValues.dateAppointmentScheduled;
+        const { appointmentDateTime, dateAppointmentScheduled } = formValues;
 
-        if (!appointmentDate || !dateAppointmentScheduled) return true;
-        return dateAppointmentScheduled < appointmentDate;
+        const startDate = appointmentDateTime?.startDate;
+
+        if (!startDate || !dateAppointmentScheduled) return true;
+
+        const normalizeDate = (date: Date) => {
+          const normalizedDate = new Date(date);
+          normalizedDate.setHours(0, 0, 0, 0);
+          return normalizedDate;
+        };
+
+        const startDateObj = normalizeDate(startDate);
+        const scheduledDateObj = normalizeDate(dateAppointmentScheduled);
+
+        return scheduledDateObj <= startDateObj;
       },
       {
         path: ['dateAppointmentScheduled'],
@@ -195,6 +206,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
         ),
       },
     );
+
   type AppointmentFormData = z.infer<typeof appointmentsFormSchema>;
 
   const defaultDateAppointmentScheduled = appointment?.dateAppointmentScheduled

packages/esm-appointments-app/src/hooks/useClinicalMetrics.ts

@@ -45,11 +45,13 @@ export function useAllAppointmentsByDate() {
     openmrsFetch,
   );
 
-  const providersArray = data?.data?.filter(({ providers }) => providers !== null) ?? [];
-  const providersCount = uniqBy(
-    providersArray.map(({ providers }) => providers).flat(),
-    (provider) => provider.uuid,
-  ).length;
+  const providersArray = data?.data?.flatMap(({ providers }) => providers ?? []) ?? [];
+
+  const validProviders = providersArray.filter((provider) => provider.response === 'ACCEPTED');
+
+  const uniqueProviders = uniqBy(validProviders, (provider) => provider.uuid);
+  const providersCount = uniqueProviders.length;
+
   return {
     totalProviders: providersCount ? providersCount : 0,
     isLoading,

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

@@ -100,6 +100,8 @@
   "location": "Location",
   "medications": "Medications",
   "missed": "Missed",
+  "next": "Next",
+  "nextMonth": "Next month",
   "nextPage": "Next page",
   "no": "No",
   "noAppointmentsToDisplay": "No appointments to display",
@@ -120,6 +122,8 @@
   "patientName": "Patient name",
   "patients": "Patients",
   "period": "Period",
+  "prev": "Prev",
+  "previousMonth": "Previous month",
   "previousPage": "Previous page",
   "provider": "Provider",
   "providers": "Providers",

packages/esm-bed-management-app/src/bed-administration/bed-administration-form.component.tsx

@@ -118,8 +118,8 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
   return (
     <ComposedModal open={showModal} onClose={() => onModalChange(false)} preventCloseOnClickOutside>
       <ModalHeader title={headerTitle} />
-      <Form onSubmit={handleSubmit(onSubmit, onError)}>
-        <ModalBody hasScrollingContent>
+      <ModalBody hasScrollingContent>
+        <Form onSubmit={handleSubmit(onSubmit, onError)}>
           <Stack gap={3}>
             <FormGroup legendText={''}>
               <Controller
@@ -275,16 +275,16 @@ const BedAdministrationForm: React.FC<BedAdministrationFormProps> = ({
               />
             )}
           </Stack>
-        </ModalBody>
-        <ModalFooter>
-          <Button onClick={() => onModalChange(false)} kind="secondary">
-            {t('cancel', 'Cancel')}
-          </Button>
-          <Button disabled={!isDirty} type="submit">
-            <span>{t('save', 'Save')}</span>
-          </Button>
-        </ModalFooter>
-      </Form>
+        </Form>
+      </ModalBody>
+      <ModalFooter>
+        <Button onClick={() => onModalChange(false)} kind="secondary">
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button disabled={!isDirty} onClick={handleSubmit(onSubmit, onError)}>
+          <span>{t('save', 'Save')}</span>
+        </Button>
+      </ModalFooter>
     </ComposedModal>
   );
 };

packages/esm-bed-management-app/src/bed-administration/bed-administration-table.scss

@@ -6,10 +6,6 @@
   border: 1px solid colors.$gray-20;
   margin: layout.$spacing-06;
 
-  :global(.cds--modal-content) {
-    margin-bottom: unset;
-  }
-
   @media (min-width: 66rem) {
     :global(.cds--modal-container) {
       max-height: 100%;

packages/esm-patient-registration-app/package.json

@@ -18,7 +18,7 @@
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.extension.tsx' 'src/**/*modal.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.extension.tsx' 'src/**/*modal.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' 'src/patient-registration/validation/patient-registration-validation.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"

packages/esm-patient-registration-app/src/config-schema.ts

@@ -37,6 +37,10 @@ export interface RegistrationConfig {
   sectionDefinitions: Array<SectionDefinition>;
   fieldDefinitions: Array<FieldDefinition>;
   fieldConfigurations: {
+    causeOfDeath: {
+      conceptUuid: string;
+      required?: boolean;
+    };
     name: {
       displayMiddleName: boolean;
       allowUnidentifiedPatients: boolean;
@@ -78,6 +82,7 @@ export interface RegistrationConfig {
     encounterProviderRoleUuid: string;
     registrationFormUuid: string | null;
   };
+  freeTextFieldConceptUuid: string;
 }
 
 export const builtInSections: Array<SectionDefinition> = [
@@ -87,12 +92,21 @@ export const builtInSections: Array<SectionDefinition> = [
     fields: ['name', 'gender', 'dob', 'id'],
   },
   { id: 'contact', name: 'Contact Details', fields: ['address', 'phone'] },
-  { id: 'death', name: 'Death Info', fields: [] },
+  { id: 'death', name: 'Death Info', fields: ['dateAndTimeOfDeath', 'causeOfDeath'] },
   { id: 'relationships', name: 'Relationships', fields: [] },
 ];
 
 // These fields are handled specially in field.component.tsx
-export const builtInFields = ['name', 'gender', 'dob', 'id', 'address', 'phone'] as const;
+export const builtInFields = [
+  'name',
+  'gender',
+  'dob',
+  'id',
+  'address',
+  'phone',
+  'causeOfDeath',
+  'dateAndTimeOfDeath',
+] as const;
 
 export const esmPatientRegistrationSchema = {
   sections: {
@@ -199,6 +213,14 @@ export const esmPatientRegistrationSchema = {
       'Definitions for custom fields that can be used in sectionDefinitions. Can also be used to override built-in fields.',
   },
   fieldConfigurations: {
+    causeOfDeath: {
+      conceptUuid: {
+        _type: Type.ConceptUuid,
+        _description: 'The concept UUID to get cause of death answers',
+        _default: '9272a14b-7260-4353-9e5b-5787b5dead9d',
+      },
+      required: { _type: Type.Boolean, _default: false },
+    },
     name: {
       displayMiddleName: { _type: Type.Boolean, _default: true },
       allowUnidentifiedPatients: {
@@ -359,6 +381,10 @@ export const esmPatientRegistrationSchema = {
         'The form UUID to associate with the registration encounter. By default no form will be associated.',
     },
   },
+  freeTextFieldConceptUuid: {
+    _default: '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    _type: Type.ConceptUuid,
+  },
   _validators: [
     validator(
       (config: RegistrationConfig) =>