@kenyaemr/esm-appointments-app 7.0.2-pre.65

package/src/routes.json

@@ -0,0 +1,153 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "webservices.rest": "^2.2.0"
+  },
+  "modals": [
+    {
+      "name": "end-appointment-modal",
+      "component": "endAppointmentModal"
+    }
+  ],
+  "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": "check-in-appointment-modal",
+      "slot": "todays-appointment-slot",
+      "component": "checkInModal"
+    },
+    {
+      "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,
+        "slot": "patient-chart-appointments-dashboard-slot",
+        "title": "Appointments",
+        "path": "Appointments"
+      }
+    },
+    {
+      "name": "patientAppointments-details-widget",
+      "component": "patientAppointmentsDetailedSummary",
+      "slot": "patient-chart-appointments-dashboard-slot",
+      "meta": {
+        "columnSpan": 1
+      }
+    },
+    {
+      "name": "patient-upcoming-appointment-widget",
+      "component": "patientUpcomingAppointmentsWidget",
+      "slot": "upcoming-appointment-slot"
+    },
+    {
+      "name": "patient-appointment-cancel-confirmation-dialog",
+      "component": "patientAppointmentsCancelConfirmationDialog"
+    },
+    {
+      "name": "edit-appointments-form",
+      "component": "appointementForm",
+      "meta": {
+        "title":{
+          "key":"editAppointment",
+          "default":"Edit Appointment"
+        }
+      }
+    },
+    {
+      "name": "search-patient",
+      "component": "searchPatient"
+   },
+    {
+      "name": "create-appointment",
+      "component": "appointementForm",
+      "meta": {
+        "title": {
+          "key":"appointmentForm",
+          "default":"Appointment Form"
+        }
+      }
+    },
+    {
+      "name": "add-appointment",
+      "component": "appointementForm",
+      "meta": {
+        "title": {
+          "key": "createNewAppointment",
+          "default": "Create new appointment"
+        }
+      }
+    }
+  ]
+}

package/src/scheduled-appointments-config-schema.ts

@@ -0,0 +1,169 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const expectedAppointmentsPanelConfigSchema = {
+  title: {
+    _type: Type.String,
+    _description: 'The title to display, may be a translation key or plain text',
+    _default: 'expected',
+  },
+  status: {
+    _type: Type.String,
+    _description:
+      'The status to filter on, must be one of the valid appointment statues: Requested, Scheduled, CheckedIn, Completed, Cancelled, Missed',
+    _default: 'Scheduled',
+  },
+  showForPastDate: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for a past date',
+    _default: false,
+  },
+  showForToday: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for today',
+    _default: true,
+  },
+  showForFutureDate: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for a future date',
+    _default: true,
+  },
+};
+
+export const checkedInAppointmentsPanelConfigSchema = {
+  title: {
+    _type: Type.String,
+    _description: 'The title to display, may be a translation key or plain text',
+    _default: 'checkedIn',
+  },
+  status: {
+    _type: Type.String,
+    _description:
+      'The status to filter on, must be one of the valid appointment statues: Requested, Scheduled, CheckedIn, Completed, Cancelled, Missed',
+    _default: 'CheckedIn',
+  },
+  showForPastDate: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for a past date',
+    _default: false,
+  },
+  showForToday: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for today',
+    _default: true,
+  },
+  showForFutureDate: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for a future date',
+    _default: false,
+  },
+};
+
+export const completedAppointmentsPanelConfigSchema = {
+  title: {
+    _type: Type.String,
+    _description: 'The title to display, may be a translation key or plain text',
+    _default: 'completed',
+  },
+  status: {
+    _type: Type.String,
+    _description:
+      'The status to filter on, must be one of the valid appointment statues: Requested, Scheduled, CheckedIn, Completed, Cancelled, Missed',
+    _default: 'Completed',
+  },
+  showForPastDate: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for a past date',
+    _default: true,
+  },
+  showForToday: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for today',
+    _default: true,
+  },
+  showForFutureDate: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for a future date',
+    _default: false,
+  },
+};
+
+export const missedAppointmentsPanelConfigSchema = {
+  title: {
+    _type: Type.String,
+    _description: 'The title to display, may be a translation key or plain text',
+    _default: 'missed',
+  },
+  status: {
+    _type: Type.String,
+    _description:
+      'The status to filter on, must be one of the valid appointment statues: Requested, Scheduled, CheckedIn, Completed, Cancelled, Missed',
+    _default: 'Missed',
+  },
+  showForPastDate: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for a past date',
+    _default: true,
+  },
+  showForToday: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for today',
+    _default: false,
+  },
+  showForFutureDate: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for a future date',
+    _default: false,
+  },
+};
+
+export const cancelledAppointmentsPanelConfigSchema = {
+  title: {
+    _type: Type.String,
+    _description: 'The title to display, may be a translation key or plain text',
+    _default: 'cancelled',
+  },
+  status: {
+    _type: Type.String,
+    _description:
+      'The status to filter on, must be one of the valid appointment statues: Requested, Scheduled, CheckedIn, Completed, Cancelled, Missed',
+    _default: 'Cancelled',
+  },
+  showForPastDate: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for a past date',
+    _default: true,
+  },
+  showForToday: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for today',
+    _default: true,
+  },
+  showForFutureDate: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for a future date',
+    _default: true,
+  },
+};
+
+export const earlyAppointmentsPanelConfigSchema = {
+  title: {
+    _type: Type.String,
+    _description: 'The title to display, may be a translation key or plain text',
+    _default: 'cameEarly',
+  },
+  showForPastDate: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for a past date',
+    _default: true,
+  },
+  showForToday: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for today',
+    _default: true,
+  },
+  showForFutureDate: {
+    _type: Type.Boolean,
+    _description: 'Whether to display this panel when viewing scheduled appointments for a future date',
+    _default: false,
+  },
+};

package/src/types/index.ts

@@ -0,0 +1,189 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+import { type amPm } from '../helpers';
+
+export enum SearchTypes {
+  BASIC = 'basic',
+  ADVANCED = 'advanced',
+  SEARCH_RESULTS = 'search_results',
+  SCHEDULED_VISITS = 'scheduled-visits',
+}
+
+export interface AppointmentLocation {
+  uuid: string;
+  name: string;
+}
+
+// note that the API supports two other statuses that we are not currently supporting: "Requested" and "WaitList"
+export enum AppointmentStatus {
+  SCHEDULED = 'Scheduled',
+  CANCELLED = 'Cancelled',
+  MISSED = 'Missed',
+  CHECKEDIN = 'CheckedIn',
+  COMPLETED = 'Completed',
+}
+
+export enum AppointmentKind {
+  SCHEDULED = 'Scheduled',
+  WALKIN = 'WalkIn',
+  VIRTUAL = 'Virtual',
+}
+
+// TODO: remove interface elements that aren't actually present on the Appointment object returned from the Appointment API
+export interface Appointment {
+  appointmentKind: AppointmentKind;
+  appointmentNumber: string;
+  comments: string;
+  endDateTime: Date | number | any;
+  location: AppointmentLocation;
+  patient: {
+    identifier: string;
+    identifiers: Array<Identifier>;
+    name: string;
+    uuid: string;
+    age?: string;
+    gender?: string;
+  };
+  provider: OpenmrsResource;
+  providers: Array<OpenmrsResource>;
+  recurring: boolean;
+  service: AppointmentService;
+  startDateTime: string | any;
+  dateAppointmentScheduled: string | any;
+  status: AppointmentStatus;
+  uuid: string;
+  additionalInfo?: string | null;
+  serviceTypes?: Array<ServiceTypes> | null;
+  voided: boolean;
+  extensions: {};
+  teleconsultationLink: string | null;
+}
+
+export interface AppointmentsFetchResponse {
+  data: Array<Appointment>;
+}
+export interface AppointmentService {
+  appointmentServiceId: number;
+  creatorName: string;
+  description: string;
+  durationMins?: number;
+  endTime: string;
+  initialAppointmentStatus: string;
+  location?: OpenmrsResource;
+  maxAppointmentsLimit: number | null;
+  name: string;
+  specialityUuid?: OpenmrsResource | {};
+  startTime: string;
+  uuid: string;
+  serviceTypes?: Array<ServiceTypes>;
+  color?: string;
+  startTimeTimeFormat?: amPm;
+  endTimeTimeFormat?: amPm;
+}
+
+export interface ServiceTypes {
+  duration: number;
+  name: string;
+  uuid: string;
+}
+
+export interface DashboardConfig {
+  name: string;
+  slot: string;
+  title: string;
+}
+
+export interface Observation {
+  uuid: string;
+  concept: {
+    uuid: string;
+    display: string;
+    conceptClass: {
+      uuid: string;
+      display: string;
+    };
+  };
+  display: string;
+  groupMembers: null | Array<{
+    uuid: string;
+    concept: {
+      uuid: string;
+      display: string;
+    };
+    value: {
+      uuid: string;
+      display: string;
+    };
+  }>;
+  value: any;
+  obsDatetime: string;
+}
+
+export interface AppointmentPayload {
+  patientUuid: string;
+  serviceUuid: string;
+  dateAppointmentScheduled: string;
+  startDateTime: string;
+  endDateTime: string;
+  appointmentKind: string;
+  providers?: Array<OpenmrsResource>;
+  locationUuid: string;
+  comments: string;
+  status?: string;
+  appointmentNumber?: string;
+  uuid?: string;
+  providerUuid?: string | OpenmrsResource;
+}
+export interface AppointmentCountMap {
+  allAppointmentsCount: number;
+  missedAppointmentsCount;
+  appointmentDate: number;
+  appointmentServiceUuid: string;
+}
+
+export interface AppointmentSummary {
+  appointmentService: OpenmrsResource;
+  appointmentCountMap: Record<string, AppointmentCountMap>;
+}
+export interface Provider {
+  uuid: string;
+  display: string;
+  comments: string;
+  response?: string;
+  person: OpenmrsResource;
+  name?: string;
+}
+
+export enum DurationPeriod {
+  monthly,
+  weekly,
+  daily,
+}
+export interface Identifier {
+  identifier: string;
+  identifierName?: string;
+}
+
+export interface DailyAppointmentsCountByService {
+  appointmentDate: string;
+  services: Array<{
+    serviceName: string;
+    serviceUuid: string;
+    count: number;
+  }>;
+}
+
+export interface RecurringPattern {
+  type: 'DAY' | 'WEEK';
+  period: number;
+  endDate: string;
+  daysOfWeek?: Array<string>; //'MONDAY' | 'TUESDAY' | 'TUESDAY' | 'WEDNESDAY' | 'THURSDAY' | 'FRIDAY' | 'SATURDAY' | 'SUNDAY'>;
+}
+
+export interface RecurringAppointmentsPayload {
+  appointmentRequest: AppointmentPayload;
+  recurringPattern: RecurringPattern;
+}
+
+export interface PatientDetails {
+  dateOfBirth: string;
+}

package/src/workload/monthly-view-workload/monthly-view.component.tsx

@@ -0,0 +1,69 @@
+import dayjs from 'dayjs';
+import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import DaysOfWeekCard from '../../calendar/monthly/days-of-week.component';
+import { monthDays } from '../../helpers';
+import SelectedDateContext from '../../hooks/selectedDateContext';
+import styles from './monthly-workload.scss';
+import MonthlyWorkloadCard from './monthlyWorkCard';
+
+interface MonthlyCalendarViewProps {
+  calendarWorkload: Array<{ count: number; date: string }>;
+  dateToDisplay?: string;
+  onDateClick?: (pickedDate: Date) => void;
+}
+
+const monthFormat = 'MMMM, YYYY';
+const MonthlyCalendarView: React.FC<MonthlyCalendarViewProps> = ({
+  calendarWorkload,
+  dateToDisplay = '',
+  onDateClick,
+}) => {
+  const { selectedDate } = useContext(SelectedDateContext);
+  const daysInWeek = ['SUN', 'MON', 'TUE', 'WED', 'THUR', 'FRI', 'SAT'];
+  const monthViewDate = dateToDisplay === '' ? selectedDate : dateToDisplay;
+  const handleClick = (date: Date) => {
+    if (onDateClick) {
+      onDateClick(date);
+    }
+  };
+  const { t } = useTranslation();
+  const daysInWeeks = daysInWeek.map((day) => t(day));
+  return (
+    <div className={styles.calendarViewContainer}>
+      <>
+        <div className={styles.container}></div>
+        <span className={styles.headerContainer}>{dayjs(monthViewDate).format(monthFormat)}</span>
+        <div className={styles.workLoadCard}>
+          {daysInWeeks?.map((day, i) => <DaysOfWeekCard key={`${day}-${i}`} dayOfWeek={day} />)}
+        </div>
+        <div className={styles.wrapper}>
+          <div className={styles.monthlyCalendar}>
+            {monthDays(dayjs(monthViewDate)).map((dateTime, i) => (
+              <div
+                onClick={() => handleClick(dayjs(dateTime).toDate())}
+                key={i}
+                className={`${styles.monthlyWorkloadCard} ${
+                  dayjs(dateTime).format('YYYY-MM-DD') === dayjs(monthViewDate).format('YYYY-MM-DD')
+                    ? styles.selectedDate
+                    : ''
+                }`}>
+                <MonthlyWorkloadCard
+                  key={i}
+                  date={dateTime}
+                  isActive={dayjs(dateToDisplay).format('DD-MM-YYYY') === dayjs(dateTime).format('DD-MM-YYYY')}
+                  count={
+                    calendarWorkload.find((calendar) => calendar.date === dayjs(dateTime).format('YYYY-MM-DD'))
+                      ?.count ?? 0
+                  }
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </>
+    </div>
+  );
+};
+
+export default MonthlyCalendarView;