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

package/src/workload/monthly-view-workload/monthly-workload.scss

@@ -0,0 +1,223 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@import '~@openmrs/esm-styleguide/src/vars';
+.monthly-cell {
+  border-left: 1px solid colors.$gray-20;
+  border-bottom: 1px solid colors.$gray-20;
+  border-right: 1px solid colors.$gray-20;
+  background: colors.$white;
+  color: colors.$black;
+  cursor: pointer;
+  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;
+  }
+
+  &-today {
+    background-color: colors.$blue-70;
+    color: colors.$white;
+  }
+
+  &-selected {
+    background-color: colors.$gray-10;
+    color: colors.$white;
+  }
+
+  &-current {
+    color: colors.$black;
+  }
+  &:hover {
+    background-color: colors.$blue-30-hover;
+    color: colors.$white;
+  }
+  &-active {
+    background-color: colors.$magenta-30;
+    color: colors.$white;
+  }
+}
+
+.monthly-cell-disabled {
+  background: colors.$white;
+  color: colors.$gray-20;
+}
+
+.monthly-cell-disabled:last-child {
+  display: none;
+}
+
+.identifiers {
+  @include type.type-style('body-compact-02');
+  color: $ui-04;
+  display: list-item;
+
+  span:not(:first-child) {
+    margin: 0rem 0.75rem;
+  }
+}
+.identifierTag {
+  display: flex;
+  align-items: center;
+}
+.weekly-cell {
+  position: relative;
+  border-right: 1px solid colors.$gray-20;
+  border-bottom: 1px solid colors.$gray-20;
+  min-height: 120px;
+  color: colors.$white;
+
+  .week-time {
+    display: none;
+  }
+
+  &:nth-child(-n + 8) {
+    border-top: 1px solid colors.$gray-20;
+  }
+
+  &:first-child {
+    border-top: none;
+  }
+
+  &:nth-child(8n + 1) {
+    border-bottom: none;
+
+    .week-time {
+      white-space: nowrap;
+      display: inline;
+      color: colors.$white;
+      position: absolute;
+      top: -11px;
+      height: layout.$spacing-06;
+      width: layout.$spacing-07;
+    }
+  }
+}
+.selectedDate {
+  background-color: #005d5d;
+  height: 100%;
+  width: 100%;
+}
+
+.currentData {
+  margin: 2px;
+  padding-top: 2px;
+}
+
+.serviceArea {
+  padding: 0.0125rem;
+  display: grid;
+  grid-template-columns: 4fr 1fr;
+  justify-content: flex-start;
+  text-align: left;
+  margin: 0.125rem;
+  @include type.type-style('label-01');
+  color: #020f1b;
+  cursor: pointer;
+
+  & > span:first-child {
+    text-align: left;
+    text-overflow: ellipsis;
+  }
+
+  & > span:nth-child(2) {
+    text-align: right;
+  }
+}
+
+.smallDesktop {
+  height: auto;
+}
+
+.largeDesktop {
+  height: auto;
+}
+
+.red {
+  background-color: colors.$red-70;
+  color: colors.$white;
+  font-weight: bold;
+}
+
+.purple {
+  background-color: colors.$yellow-70;
+  color: colors.$white;
+  font-weight: bold;
+}
+
+.blue {
+  color: colors.$blue-70;
+  font-weight: bold;
+}
+.black {
+  color: colors.$black;
+  font-weight: bold;
+}
+
+.green {
+  background-color: colors.$green-70;
+  color: colors.$white;
+  font-weight: bold;
+}
+
+.calendarDate {
+  @include type.type-style('heading-compact-01');
+}
+
+.wrapper {
+  position: relative;
+}
+.monthlyCalendar {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0px, 1fr));
+  grid-template-rows: repeat(6, minmax(0px, 1fr));
+}
+.selectedDate {
+  background-color: red;
+}
+
+.calendarViewContainer {
+  margin: 5px;
+}
+.backgroundColor {
+  margin: 1px 0 0;
+  transition: width 0.24s ease-in-out;
+  position: relative;
+  min-height: calc(100vh - 80px);
+  background-color: colors.$white;
+}
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: layout.$spacing-06;
+}
+.workLoadCard {
+  display: flex;
+  color: colors.$black;
+}
+.activeWorkloadCard {
+  background-color: colors.$blue-10;
+
+  & label {
+    color: colors.$blue-60;
+  }
+}
+.workLoadContainer {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  padding-bottom: 1rem;
+}
+.headerContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: layout.$spacing-06;
+}

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './monthly-workload.scss';
+import { useLayoutType } from '@openmrs/esm-framework';
+import { isSameMonth } from '../../helpers';
+import dayjs, { type Dayjs } from 'dayjs';
+
+interface MonthlyWorkloadComponentProps {
+  date: Dayjs;
+  count: number;
+  isActive: boolean;
+  selectedDate?: Dayjs;
+}
+
+const MonthlyWorkloadCard: React.FC<MonthlyWorkloadComponentProps> = ({ date, count, isActive, selectedDate }) => {
+  const layout = useLayoutType();
+  const isToday = date.isSame(dayjs(), 'day');
+  return (
+    <div
+      className={classNames(
+        styles['monthly-cell'],
+        {
+          [styles['monthly-cell-selected']]: isSameMonth(date, dayjs(selectedDate)),
+          [styles['monthly-cell-current']]: isSameMonth(date, dayjs(selectedDate)),
+          [styles['monthly-cell-current']]: isSameMonth(date, selectedDate),
+          [styles['monthly-cell-active']]: isActive,
+        },
+        {
+          [styles.smallDesktop]: layout === 'small-desktop',
+          [styles.largeDesktop]: layout !== 'small-desktop',
+        },
+      )}>
+      <p>
+        <b className={[styles.calendarDate, isToday ? styles.blue : ''].join(' ')}>{date.format('D')}</b>
+        <div className={styles.currentData}>
+          <div tabIndex={0} role="button" className={classNames(styles.tileContainer, {})}></div>
+          <div className={styles.serviceArea}>
+            <span className={isActive ? styles.blue : ''}>{count}</span>
+          </div>
+        </div>
+      </p>
+    </div>
+  );
+};
+export default MonthlyWorkloadCard;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './workload.scss';
+
+interface WorkloadCardProp {
+  day: string;
+  date: string;
+  count: number;
+  isActive: boolean;
+}
+const WorkloadCard: React.FC<WorkloadCardProp> = ({ day, date, count, isActive }) => {
+  return (
+    <div
+      tabIndex={0}
+      role="button"
+      className={classNames(styles.tileContainer, {
+        [styles.activeWorkloadCard]: isActive,
+      })}>
+      <div>
+        <label className={styles.dayLabel}>{day}</label>
+      </div>
+      <div>
+        <label className={styles.headerLabel}>{date}</label>
+      </div>
+      <div>
+        <label className={styles.totalsLabel}>{count}</label>
+      </div>
+    </div>
+  );
+};
+export default WorkloadCard;

package/src/workload/workload.component.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { Tabs, Tab, TabPanel, TabPanels, TabList } from '@carbon/react';
+import WorkloadCard from './workload-card.component';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { useCalendarDistribution, useMonthlyCalendarDistribution } from './workload.resource';
+import styles from './workload.scss';
+import { useAppointmentService } from '../form/appointments-form.resource';
+import MonthlyCalendarView from './monthly-view-workload/monthly-view.component';
+
+interface WorkloadProps {
+  selectedService: string;
+  appointmentDate: Date;
+  onWorkloadDateChange: (pickedDate: Date) => void;
+}
+
+const Workload: React.FC<WorkloadProps> = ({ selectedService, appointmentDate, onWorkloadDateChange }) => {
+  const { t } = useTranslation();
+  const [selectedTab, setSelectedTab] = useState(0);
+  const { data: services } = useAppointmentService();
+  const serviceUuid = services?.find((service) => service.name === selectedService)?.uuid;
+  const calendarWorkload = useCalendarDistribution(serviceUuid, selectedTab === 0 ? 'week' : 'month', appointmentDate);
+  const monthlyCalendarWorkload = useMonthlyCalendarDistribution(
+    serviceUuid,
+    selectedTab === 0 ? 'week' : 'month',
+    appointmentDate,
+  );
+  const handleDateClick = (pickedDate: Date) => {
+    onWorkloadDateChange(pickedDate);
+  };
+
+  return (
+    <div className={styles.workLoadContainer}>
+      <div>
+        <div>
+          <MonthlyCalendarView
+            calendarWorkload={monthlyCalendarWorkload}
+            dateToDisplay={appointmentDate.toISOString()}
+            onDateClick={handleDateClick}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Workload;

package/src/workload/workload.resource.ts

@@ -0,0 +1,78 @@
+import useSWR from 'swr';
+import dayjs from 'dayjs';
+import first from 'lodash-es/first';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type AppointmentSummary } from '../types';
+import { omrsDateFormat } from '../constants';
+interface AppointmentCount {
+  date: string;
+  count: number;
+}
+
+export const getMonthlyCalendarDistribution = (startDate: Date, appointmentCount: Array<AppointmentCount>) => {
+  const distributionHashTable = new Map<string, number>([]);
+  for (let i = 0; i <= 35; i++) {
+    distributionHashTable.set(dayjs(startDate).add(i, 'day').format('YYYY-MM-DD'), 0);
+  }
+  appointmentCount.map(({ date, count }) => {
+    if (distributionHashTable.has(date)) {
+      distributionHashTable.set(date, count);
+    }
+  });
+
+  return Array.from(distributionHashTable).flatMap(([date, value]) => ({ date: date, count: value }));
+};
+
+export const useCalendarDistribution = (
+  serviceUuid: string,
+  distributionType: 'month' | 'week',
+  appointmentDate: Date,
+) => {
+  const appointmentSummary = useAppointmentSummary(new Date(appointmentDate), serviceUuid);
+  const monthlyData = getMonthlyCalendarDistribution(new Date(appointmentDate), appointmentSummary) ?? [];
+  return distributionType === 'month' ? monthlyData : monthlyData.slice(0, 6);
+};
+
+export const useAppointmentSummary = (fromDate: Date, serviceUuid: string): Array<{ date: string; count: number }> => {
+  const startDate = dayjs(fromDate).startOf('week').format(omrsDateFormat);
+  const endDate = dayjs(startDate).add(2, 'week').format(omrsDateFormat);
+  const url = `${restBaseUrl}/appointment/appointmentSummary?startDate=${startDate}&endDate=${endDate}`;
+  const { data } = useSWR<{ data: Array<AppointmentSummary> }>(url, openmrsFetch);
+  const results = first(data?.data?.filter(({ appointmentService }) => appointmentService.uuid === serviceUuid));
+  const appointmentCountMap = results?.appointmentCountMap;
+  return Object.entries(appointmentCountMap ?? [])
+    .map(([key, value]) => ({
+      date: key,
+      count: value.allAppointmentsCount,
+    }))
+    .sort((dateA, dateB) => new Date(dateA.date).getTime() - new Date(dateB.date).getTime());
+};
+export const useMonthlyCalendarDistribution = (
+  serviceUuid: string,
+  distributionType: 'month' | 'week',
+  appointmentDate: Date,
+) => {
+  const appointmentSummary = useMonthlyAppointmentSummary(appointmentDate, serviceUuid);
+
+  return distributionType === 'month' ? appointmentSummary : appointmentSummary.slice(0, 6);
+};
+
+export const useMonthlyAppointmentSummary = (
+  fromDate: Date,
+  serviceUuid: string,
+): Array<{ date: string; count: number }> => {
+  const startDate = dayjs(fromDate).startOf('month').format(omrsDateFormat);
+  const endDate = dayjs(fromDate).endOf('month').format(omrsDateFormat);
+  const url = `${restBaseUrl}/appointment/appointmentSummary?startDate=${startDate}&endDate=${endDate}`;
+  const { data } = useSWR<{ data: Array<AppointmentSummary> }>(url, openmrsFetch);
+
+  const results = first(data?.data?.filter(({ appointmentService }) => appointmentService.uuid === serviceUuid));
+  const appointmentCountMap = results?.appointmentCountMap;
+
+  return Object.entries(appointmentCountMap ?? [])
+    .map(([key, value]) => ({
+      date: key,
+      count: value.allAppointmentsCount,
+    }))
+    .sort((dateA, dateB) => new Date(dateA.date).getTime() - new Date(dateB.date).getTime());
+};

package/src/workload/workload.scss

@@ -0,0 +1,92 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.workLoadCard {
+  display: flex;
+  color: colors.$black;
+}
+
+.monthlyWorkLoadCard {
+  color: #525252;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.workLoadContainer {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  padding-bottom: 1rem;
+}
+
+.cardContainer {
+  background-color: $ui-02;
+  display: flex;
+  height: layout.$spacing-12;
+}
+
+.tileContainer {
+  padding: 0.5rem;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  cursor: pointer;
+  border: 1px solid colors.$blue-30;
+
+  &:first-child {
+    border-left-width: 1px;
+  }
+
+  & label {
+    color: colors.$gray-70;
+  }
+}
+
+.tileHeader {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: layout.$spacing-05;
+}
+.dayLabel {
+  @include type.type-style('heading-compact-01');
+  color: colors.$blue-30;
+  text-decoration: underline;
+  border-bottom: 5px;
+}
+
+.headerLabel {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+}
+
+.totalsLabel {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.totalsValue {
+  @include type.type-style('heading-04');
+  color: $ui-05;
+}
+
+.headerLabelContainer {
+  display: flex;
+  align-items: center;
+  height: layout.$spacing-07;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.activeWorkloadCard {
+  background-color: colors.$blue-10;
+
+  & label {
+    color: colors.$blue-60;
+  }
+}

package/translations/am.json

@@ -0,0 +1,148 @@
+{
+  "action": "Action",
+  "actions": "Actions",
+  "add": "Add",
+  "addAppointment": "Add Appointment",
+  "addPatientToQueue": "Add patient to queue",
+  "age": "Age",
+  "all": "All",
+  "allDay": "All day",
+  "appointmentCancelError": "Error cancelling appointment",
+  "appointmentCancelled": "Appointment cancelled",
+  "appointmentCancelledSuccessfully": "Appointment cancelled successfully",
+  "appointmentColor": "Appointment color",
+  "appointmentEdited": "Appointment edited",
+  "appointmentEditError": "Error editing appointment",
+  "appointmentForm": "Create Appointment",
+  "appointmentFormError": "Error scheduling appointment",
+  "appointmentHistory": "Appointment History",
+  "appointmentMetrics": "Appointment metrics",
+  "appointmentMetricsLoadError": "",
+  "appointmentNoteLabel": "Write an additional note",
+  "appointmentNotePlaceholder": "Write any additional points here",
+  "appointmentNotes": "Appointment Notes",
+  "appointmentNowVisible": "It is now visible on the Appointments page",
+  "appointments": "appointment",
+  "appointmentsCalendar": "Appointments Calendar",
+  "appointmentScheduled": "Appointment scheduled",
+  "appointmentService": "Appointment service",
+  "appointmentServiceCreate": "Appointment service created successfully",
+  "appointmentServiceName": "Appointment service name",
+  "appointmentStatus": "Appointment status",
+  "appointmentToFulfill": "Select appointment(s) to fulfill",
+  "appointmentType": "Appointment type",
+  "appointmentType_title": "Appointment Type",
+  "back": "Back",
+  "calendar": "Calendar",
+  "cameEarly": "Came early",
+  "cancel": "Cancel",
+  "cancelAppointment": "Cancel Appointment",
+  "cancelAppointmentModalConfirmationText": "Are you sure you want to cancel this appointment?",
+  "cancelled": "Cancelled",
+  "checkedIn": "Checked in",
+  "checkedOut": "Checked out",
+  "checkIn": "Check In",
+  "checkOut": "Check out",
+  "chooseAppointmentType": "Choose appointment type",
+  "chooseLocation": "Choose a location",
+  "chooseProvider": "Choose a provider",
+  "chooseService": "Select service",
+  "completed": "Completed",
+  "createAppointmentService": "Create appointment service",
+  "createNewAppointment": "Create new appointment",
+  "date": "Date",
+  "date&Time": "Date & time",
+  "dateAndTimeOfVisit": "Date and time of visit",
+  "dateOfBirth": "Date of birth",
+  "dateTime": "Date & Time",
+  "day": "Day",
+  "daysOfWeek": "Days of the week",
+  "discard": "Discard",
+  "download": "Download",
+  "durationInMinutes": "Duration (minutes)",
+  "durationMins": "Duration min",
+  "edit": "Edit",
+  "editAppointment": "Edit Appointment",
+  "editAppointments": "Edit Appointment",
+  "emptyStateText": "There are no {{displayText}} to display",
+  "encounters": "Encounters",
+  "encounterType": "Encounter type",
+  "endDate": "End date",
+  "endTime": "End Time",
+  "errorCreatingAppointmentService": "Error creating appointment service",
+  "expected": "Expected",
+  "gender": "Gender",
+  "highestServiceVolume": "Highest volume service: {{time}}",
+  "home": "Home",
+  "identifier": "Identifier",
+  "invalidNumber": "Number is not valid",
+  "invalidTime": "Invalid time",
+  "isRecurringAppointment": "Is this a recurring appointment?",
+  "loading": "Loading",
+  "location": "Location",
+  "medications": "Medications",
+  "missed": "Missed",
+  "missingVisitType": "Missing visit type",
+  "no": "No",
+  "noContent": "No Content",
+  "noCurrentAppointments": "There are no appointments scheduled for today to display for this patient",
+  "noEncountersFound": "No encounters found",
+  "noMatchingVisitTypeFound": "",
+  "noPastAppointments": "There are no past appointments to display for this patient",
+  "noPreviousVisitFound": "No previous visit found",
+  "notArrived": "Not arrived",
+  "note": "Note",
+  "notes": "Notes",
+  "noUpcomingAppointments": "No upcoming appointments found",
+  "noUpcomingAppointmentsForPatient": "There are no upcoming appointments to display for this patient",
+  "past": "Past",
+  "patientDetails": "Patient details",
+  "patientName": "Patient name",
+  "patients": "Patients",
+  "patientSearch": "Patient search",
+  "period": "Period",
+  "provider": "Provider",
+  "providers": "Providers",
+  "providersBooked": "Providers booked: {{time}}",
+  "queueAddedSuccessfully": "",
+  "queueEntryError": "Error adding patient to the queue",
+  "recurringAppointment": "Recurring Appointment",
+  "repeatEvery": "Repeat every",
+  "save": "Save",
+  "saveAndClose": "Save and close",
+  "scheduled": "Scheduled",
+  "scheduledAppointments": "Scheduled appointments",
+  "search": "Search",
+  "searchForAVisitType": "Search for a visit type",
+  "selectAppointmentStatus": "Select status",
+  "selectAppointmentType": "Select an appointment type",
+  "selectFacility": "Select a facility",
+  "selectLocation": "Select location",
+  "selectOption": "Select an option",
+  "selectProvider": "Select a provider",
+  "selectService": "Select a service",
+  "selectServiceType": "Select service type",
+  "selectVisitType": "Please select a Visit Type",
+  "service": "Service",
+  "serviceName": "Service name",
+  "serviceType": "Service Type",
+  "startDate": "Start date",
+  "startTime": "Start Time",
+  "startVisitError": "Error starting visit",
+  "time": "Time",
+  "today": "Today",
+  "todays": "Today's",
+  "total": "Total",
+  "unscheduled": "Unscheduled",
+  "unscheduledAppointments": "Unscheduled appointments",
+  "unscheduledAppointments_lower": "unscheduled appointments",
+  "upcoming": "Upcoming",
+  "upcomingAppointments": "Upcoming appointments",
+  "view": "View",
+  "visitLocation": "Visit Location",
+  "visitStarted": "Visit started",
+  "visitType": "Visit Type",
+  "vitals": "Vitals",
+  "week": "Week",
+  "yes": "Yes"
+}