@palladium-ethiopia/esm-appointments-admin-app 5.4.2-pre.243

package/src/workspace/appointment-service-admin.workspace.tsx

@@ -0,0 +1,335 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import { Button, ButtonSet, Form, InlineLoading, NumberInput, Stack, TextInput } from '@carbon/react';
+import { Add, Copy, TrashCan } from '@carbon/react/icons';
+import { Controller, useFieldArray, useForm } from 'react-hook-form';
+import { type DefaultWorkspaceProps, ResponsiveWrapper, showSnackbar, useLayoutType } from '@openmrs/esm-framework';
+import { revalidateAppointmentServices, saveAppointmentService } from '../api/appointment-service.resource';
+import { DAYS_OF_WEEK, type DayOfWeek } from '../constants';
+import type { AppointmentService, AppointmentServiceFormValues } from '../types';
+import {
+  getDayBlockTotal,
+  getErrorMessage,
+  mapFormValuesToSavePayload,
+  mapServiceToFormValues,
+} from './appointment-service-form.helper';
+import CopyDayBlocksModal from './copy-day-blocks-modal.component';
+import { copyDayBlocksToDays, type CopyDayBlocksMode } from './copy-day-blocks.helper';
+import styles from './appointment-service-admin.workspace.scss';
+
+type AppointmentServiceAdminWorkspaceProps = DefaultWorkspaceProps & {
+  appointmentService?: AppointmentService;
+};
+
+const defaultBlockTimes = {
+  startTime: '09:00',
+  endTime: '17:00',
+};
+
+const AppointmentServiceAdminWorkspace: React.FC<AppointmentServiceAdminWorkspaceProps> = ({
+  appointmentService,
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const [copySourceDay, setCopySourceDay] = useState<DayOfWeek | null>(null);
+  const defaultValues = useMemo(
+    () =>
+      appointmentService ? mapServiceToFormValues(appointmentService) : { maxAppointmentsLimit: null, blocks: [] },
+    [appointmentService],
+  );
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    reset,
+    setValue,
+    formState: { isDirty, isSubmitting },
+  } = useForm<AppointmentServiceFormValues>({
+    defaultValues,
+  });
+
+  const { fields, append, update, remove } = useFieldArray({
+    control,
+    name: 'blocks',
+    keyName: 'clientId',
+  });
+
+  const blocks = watch('blocks');
+
+  useEffect(() => {
+    if (appointmentService) {
+      reset(mapServiceToFormValues(appointmentService));
+    }
+  }, [appointmentService, reset]);
+
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+  }, [isDirty, promptBeforeClosing]);
+
+  const getDayLabel = (day: DayOfWeek) => {
+    const labels: Record<DayOfWeek, string> = {
+      MONDAY: t('dayMonday', 'Monday'),
+      TUESDAY: t('dayTuesday', 'Tuesday'),
+      WEDNESDAY: t('dayWednesday', 'Wednesday'),
+      THURSDAY: t('dayThursday', 'Thursday'),
+      FRIDAY: t('dayFriday', 'Friday'),
+      SATURDAY: t('daySaturday', 'Saturday'),
+      SUNDAY: t('daySunday', 'Sunday'),
+    };
+    return labels[day];
+  };
+
+  const handleAddBlock = (dayOfWeek: DayOfWeek) => {
+    append({
+      clientId: crypto.randomUUID(),
+      dayOfWeek,
+      startTime: defaultBlockTimes.startTime,
+      endTime: defaultBlockTimes.endTime,
+      maxAppointmentsLimit: null,
+      voided: false,
+    });
+  };
+
+  const handleCopyDayBlocks = (targetDays: Array<DayOfWeek>, mode: CopyDayBlocksMode) => {
+    if (!copySourceDay) {
+      return;
+    }
+
+    const sourceDay = copySourceDay;
+    const nextBlocks = copyDayBlocksToDays(blocks, sourceDay, targetDays, mode);
+    setValue('blocks', nextBlocks, { shouldDirty: true });
+    setCopySourceDay(null);
+
+    showSnackbar({
+      title: t('success', 'Success'),
+      kind: 'success',
+      subtitle: t('copyDayBlocksSuccess', 'Copied blocks from {{sourceDay}} to {{count}} day(s).', {
+        sourceDay: getDayLabel(sourceDay),
+        count: targetDays.length,
+      }),
+      isLowContrast: true,
+    });
+  };
+
+  const handleRemoveBlock = (index: number) => {
+    const block = blocks[index];
+    if (block?.uuid) {
+      update(index, { ...block, voided: true });
+      return;
+    }
+
+    remove(index);
+  };
+
+  const onSubmit = async (values: AppointmentServiceFormValues) => {
+    if (!appointmentService) {
+      return;
+    }
+
+    try {
+      const payload = mapFormValuesToSavePayload(appointmentService, values);
+      await saveAppointmentService(payload);
+      await revalidateAppointmentServices();
+
+      showSnackbar({
+        title: t('success', 'Success'),
+        kind: 'success',
+        subtitle: t('serviceAvailabilitySaved', 'Availability saved for {{serviceName}}.', {
+          serviceName: appointmentService.name,
+        }),
+      });
+
+      closeWorkspaceWithSavedChanges();
+    } catch (error) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        kind: 'error',
+        subtitle: getErrorMessage(
+          error,
+          t('serviceAvailabilitySaveError', 'Error saving appointment service availability'),
+        ),
+      });
+    }
+  };
+
+  if (!appointmentService) {
+    return (
+      <div className={styles.formContainer}>
+        <p>{t('selectServiceFromList', 'Select a service from the list to configure availability.')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <Form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+      <div className={styles.formContainer}>
+        <p className={styles.serviceName}>{appointmentService.name}</p>
+
+        <Stack gap={6}>
+          <ResponsiveWrapper>
+            <Controller
+              control={control}
+              name="maxAppointmentsLimit"
+              render={({ field }) => (
+                <NumberInput
+                  id="maxAppointmentsLimit"
+                  label={t('serviceMaxAppointmentsLimit', 'Service max appointments (daily cap)')}
+                  helperText={t(
+                    'serviceMaxAppointmentsLimitHelper',
+                    'Optional overall limit for this service. Weekly block limits are summed per day.',
+                  )}
+                  min={0}
+                  value={field.value ?? ''}
+                  onChange={(_, { value }) => {
+                    if (value === '' || value === undefined) {
+                      field.onChange(null);
+                      return;
+                    }
+                    field.onChange(Number(value));
+                  }}
+                />
+              )}
+            />
+          </ResponsiveWrapper>
+
+          <div>
+            <h4 className={styles.sectionTitle}>{t('weeklyAvailability', 'Weekly availability')}</h4>
+
+            {DAYS_OF_WEEK.map((day) => {
+              const dayBlocks = fields
+                .map((field, index) => ({ field, index }))
+                .filter(({ index }) => blocks[index]?.dayOfWeek === day && !blocks[index]?.voided);
+
+              return (
+                <section className={styles.daySection} key={day}>
+                  <div className={styles.dayHeader}>
+                    <h5 className={styles.dayTitle}>{getDayLabel(day)}</h5>
+                    <div className={styles.dayActions}>
+                      <Button
+                        disabled={dayBlocks.length === 0}
+                        kind="ghost"
+                        renderIcon={Copy}
+                        size="sm"
+                        onClick={() => setCopySourceDay(day)}>
+                        {t('copyToOtherDays', 'Copy to other days')}
+                      </Button>
+                      <Button kind="ghost" renderIcon={Add} size="sm" onClick={() => handleAddBlock(day)}>
+                        {t('addBlock', 'Add block')}
+                      </Button>
+                    </div>
+                  </div>
+
+                  {dayBlocks.length === 0 ? (
+                    <p className={styles.emptyDay}>{t('noBlocksForDay', 'No availability blocks for this day.')}</p>
+                  ) : (
+                    dayBlocks.map(({ field, index }) => (
+                      <div className={styles.blockRow} key={field.clientId}>
+                        <Controller
+                          control={control}
+                          name={`blocks.${index}.startTime`}
+                          rules={{ required: t('startTimeRequired', 'Start time is required') }}
+                          render={({ field: timeField, fieldState }) => (
+                            <TextInput
+                              id={`${field.clientId}-start`}
+                              labelText={t('startTime', 'Start time')}
+                              placeholder="09:00"
+                              type="time"
+                              value={timeField.value}
+                              onChange={timeField.onChange}
+                              invalid={!!fieldState.error}
+                              invalidText={fieldState.error?.message}
+                            />
+                          )}
+                        />
+                        <Controller
+                          control={control}
+                          name={`blocks.${index}.endTime`}
+                          rules={{ required: t('endTimeRequired', 'End time is required') }}
+                          render={({ field: timeField, fieldState }) => (
+                            <TextInput
+                              id={`${field.clientId}-end`}
+                              labelText={t('endTime', 'End time')}
+                              placeholder="17:00"
+                              type="time"
+                              value={timeField.value}
+                              onChange={timeField.onChange}
+                              invalid={!!fieldState.error}
+                              invalidText={fieldState.error?.message}
+                            />
+                          )}
+                        />
+                        <Controller
+                          control={control}
+                          name={`blocks.${index}.maxAppointmentsLimit`}
+                          render={({ field: limitField }) => (
+                            <NumberInput
+                              id={`${field.clientId}-limit`}
+                              label={t('blockMaxAppointments', 'Block limit')}
+                              min={0}
+                              value={limitField.value ?? ''}
+                              onChange={(_, { value }) => {
+                                if (value === '' || value === undefined) {
+                                  limitField.onChange(null);
+                                  return;
+                                }
+                                limitField.onChange(Number(value));
+                              }}
+                            />
+                          )}
+                        />
+                        <Button
+                          kind="danger--ghost"
+                          renderIcon={TrashCan}
+                          iconDescription={t('removeBlock', 'Remove block')}
+                          hasIconOnly
+                          onClick={() => handleRemoveBlock(index)}
+                        />
+                      </div>
+                    ))
+                  )}
+
+                  <p className={styles.dayTotal}>
+                    {t('dayBlockTotal', 'Day total: {{total}}', {
+                      total: getDayBlockTotal(blocks, day),
+                    })}
+                  </p>
+                </section>
+              );
+            })}
+          </div>
+        </Stack>
+      </div>
+
+      <CopyDayBlocksModal
+        open={copySourceDay !== null}
+        sourceDay={copySourceDay}
+        getDayLabel={getDayLabel}
+        onClose={() => setCopySourceDay(null)}
+        onApply={handleCopyDayBlocks}
+      />
+
+      <ButtonSet className={classNames(styles.buttonSet, { [styles.buttonSetTablet]: isTablet })}>
+        <Button kind="secondary" onClick={() => closeWorkspace()}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button disabled={isSubmitting || !isDirty} kind="primary" type="submit">
+          {isSubmitting ? (
+            <span className={styles.inlineLoading}>
+              {t('saving', 'Saving')}
+              <InlineLoading />
+            </span>
+          ) : (
+            t('saveAndClose', 'Save & close')
+          )}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default AppointmentServiceAdminWorkspace;

package/src/workspace/appointment-service-form.helper.ts

@@ -0,0 +1,112 @@
+import type {
+  AppointmentService,
+  AppointmentServiceFormValues,
+  AppointmentServiceSavePayload,
+  AvailabilityBlockFormValue,
+  WeeklyAvailabilityPayload,
+} from '../types';
+
+export function toFormTime(time?: string): string {
+  if (!time) {
+    return '';
+  }
+
+  return time.substring(0, 5);
+}
+
+/** Bahmni expects java.sql.Time as "HH:mm:ss". Never send empty strings. */
+export function toApiTime(time?: string): string | undefined {
+  if (!time?.trim()) {
+    return undefined;
+  }
+
+  const trimmed = time.trim();
+
+  if (trimmed.length === 5) {
+    return `${trimmed}:00`;
+  }
+
+  return trimmed;
+}
+
+export function mapServiceToFormValues(service: AppointmentService): AppointmentServiceFormValues {
+  return {
+    maxAppointmentsLimit: service.maxAppointmentsLimit ?? null,
+    blocks: (service.weeklyAvailability ?? []).map((block, index) => ({
+      clientId: block.uuid ?? `existing-${index}`,
+      uuid: block.uuid,
+      dayOfWeek: block.dayOfWeek,
+      startTime: toFormTime(block.startTime),
+      endTime: toFormTime(block.endTime),
+      maxAppointmentsLimit: block.maxAppointmentsLimit ?? null,
+      voided: false,
+    })),
+  };
+}
+
+export function getDayBlockTotal(blocks: Array<AvailabilityBlockFormValue>, dayOfWeek: string): number {
+  return blocks
+    .filter((block) => block.dayOfWeek === dayOfWeek && !block.voided)
+    .reduce((total, block) => total + (block.maxAppointmentsLimit ?? 0), 0);
+}
+
+export function mapFormValuesToSavePayload(
+  service: AppointmentService,
+  values: AppointmentServiceFormValues,
+): AppointmentServiceSavePayload {
+  const payload: AppointmentServiceSavePayload = {
+    uuid: service.uuid,
+    name: service.name,
+    description: service.description,
+    specialityUuid: service.speciality?.uuid,
+    locationUuid: service.location?.uuid,
+    maxAppointmentsLimit: values.maxAppointmentsLimit,
+    durationMins: service.durationMins ?? undefined,
+    color: service.color,
+    initialAppointmentStatus: service.initialAppointmentStatus,
+    weeklyAvailability: values.blocks
+      .filter((block) => block.uuid || !block.voided)
+      .map((block) => {
+        const availability: WeeklyAvailabilityPayload = {
+          dayOfWeek: block.dayOfWeek,
+          maxAppointmentsLimit: block.maxAppointmentsLimit,
+          voided: block.voided ?? false,
+        };
+
+        if (block.uuid) {
+          availability.uuid = block.uuid;
+        }
+
+        const startTime = toApiTime(block.startTime);
+        const endTime = toApiTime(block.endTime);
+
+        if (startTime) {
+          availability.startTime = startTime;
+        }
+
+        if (endTime) {
+          availability.endTime = endTime;
+        }
+
+        return availability;
+      }),
+  };
+
+  const serviceStartTime = toApiTime(toFormTime(service.startTime));
+  const serviceEndTime = toApiTime(toFormTime(service.endTime));
+
+  if (serviceStartTime) {
+    payload.startTime = serviceStartTime;
+  }
+
+  if (serviceEndTime) {
+    payload.endTime = serviceEndTime;
+  }
+
+  return payload;
+}
+
+export function getErrorMessage(error: unknown, fallback: string): string {
+  const err = error as { responseBody?: { error?: { message?: string } }; message?: string };
+  return err?.responseBody?.error?.message ?? err?.message ?? fallback;
+}

package/src/workspace/copy-day-blocks-modal.component.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  ComposedModal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  RadioButton,
+  RadioButtonGroup,
+  Stack,
+} from '@carbon/react';
+import { DAYS_OF_WEEK, WEEKDAYS, type DayOfWeek } from '../constants';
+import type { CopyDayBlocksMode } from './copy-day-blocks.helper';
+import styles from './copy-day-blocks-modal.scss';
+
+interface CopyDayBlocksModalProps {
+  open: boolean;
+  sourceDay: DayOfWeek | null;
+  getDayLabel: (day: DayOfWeek) => string;
+  onClose: () => void;
+  onApply: (targetDays: Array<DayOfWeek>, mode: CopyDayBlocksMode) => void;
+}
+
+const CopyDayBlocksModal: React.FC<CopyDayBlocksModalProps> = ({ open, sourceDay, getDayLabel, onClose, onApply }) => {
+  const { t } = useTranslation();
+  const [selectedDays, setSelectedDays] = useState<Array<DayOfWeek>>([]);
+  const [mode, setMode] = useState<CopyDayBlocksMode>('replace');
+
+  const targetDayOptions = useMemo(() => DAYS_OF_WEEK.filter((day) => day !== sourceDay), [sourceDay]);
+
+  useEffect(() => {
+    if (open) {
+      setSelectedDays([]);
+      setMode('replace');
+    }
+  }, [open, sourceDay]);
+
+  const handleApply = () => {
+    if (!sourceDay || selectedDays.length === 0) {
+      return;
+    }
+
+    onApply(selectedDays, mode);
+  };
+
+  const selectWeekdays = () => {
+    setSelectedDays(WEEKDAYS.filter((day) => day !== sourceDay));
+  };
+
+  const selectAll = () => {
+    setSelectedDays([...targetDayOptions]);
+  };
+
+  const clearSelection = () => {
+    setSelectedDays([]);
+  };
+
+  return (
+    <ComposedModal open={open} onClose={onClose} size="sm">
+      <ModalHeader
+        title={t('copyDayBlocksTitle', 'Copy {{day}} blocks', {
+          day: sourceDay ? getDayLabel(sourceDay) : '',
+        })}
+        closeModal={onClose}
+      />
+      <ModalBody>
+        <Stack gap={5}>
+          <p className={styles.description}>
+            {t(
+              'copyDayBlocksDescription',
+              'Copy this day’s time blocks and limits to other days. Existing blocks on target days can be replaced or kept.',
+            )}
+          </p>
+
+          <div className={styles.quickSelect}>
+            <Button kind="ghost" size="sm" onClick={selectWeekdays}>
+              {t('selectWeekdays', 'Weekdays')}
+            </Button>
+            <Button kind="ghost" size="sm" onClick={selectAll}>
+              {t('selectAllDays', 'All days')}
+            </Button>
+            <Button kind="ghost" size="sm" onClick={clearSelection}>
+              {t('clearSelection', 'Clear')}
+            </Button>
+          </div>
+
+          <CheckboxGroup legendText={t('copyToDays', 'Copy to')}>
+            {targetDayOptions.map((day) => (
+              <Checkbox
+                key={day}
+                id={`copy-to-${day}`}
+                labelText={getDayLabel(day)}
+                checked={selectedDays.includes(day)}
+                onChange={(_, { checked }) => {
+                  setSelectedDays((current) =>
+                    checked ? [...current, day] : current.filter((selectedDay) => selectedDay !== day),
+                  );
+                }}
+              />
+            ))}
+          </CheckboxGroup>
+
+          <RadioButtonGroup
+            legendText={t('copyMode', 'When target days already have blocks')}
+            name="copy-day-blocks-mode"
+            valueSelected={mode}
+            onChange={(value) => setMode(value as CopyDayBlocksMode)}>
+            <RadioButton
+              id="copy-mode-replace"
+              labelText={t('copyModeReplace', 'Replace existing blocks')}
+              value="replace"
+            />
+            <RadioButton
+              id="copy-mode-append"
+              labelText={t('copyModeAppend', 'Add to existing blocks')}
+              value="append"
+            />
+          </RadioButtonGroup>
+        </Stack>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={onClose}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button disabled={selectedDays.length === 0} kind="primary" onClick={handleApply}>
+          {t('copyBlocks', 'Copy blocks')}
+        </Button>
+      </ModalFooter>
+    </ComposedModal>
+  );
+};
+
+export default CopyDayBlocksModal;

package/src/workspace/copy-day-blocks-modal.scss

@@ -0,0 +1,13 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.description {
+  @include type.type-style('body-compact-01');
+  color: var(--cds-text-secondary);
+}
+
+.quickSelect {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-02;
+}

package/src/workspace/copy-day-blocks.helper.ts

@@ -0,0 +1,48 @@
+import type { AvailabilityBlockFormValue } from '../types';
+
+export type CopyDayBlocksMode = 'replace' | 'append';
+
+export function copyDayBlocksToDays(
+  blocks: Array<AvailabilityBlockFormValue>,
+  sourceDay: string,
+  targetDays: Array<string>,
+  mode: CopyDayBlocksMode,
+): Array<AvailabilityBlockFormValue> {
+  const sourceBlocks = blocks.filter((block) => block.dayOfWeek === sourceDay && !block.voided);
+
+  if (sourceBlocks.length === 0 || targetDays.length === 0) {
+    return blocks;
+  }
+
+  const targetDaySet = new Set(targetDays);
+  let nextBlocks = [...blocks];
+
+  if (mode === 'replace') {
+    nextBlocks = nextBlocks
+      .map((block) => {
+        if (!targetDaySet.has(block.dayOfWeek) || block.voided) {
+          return block;
+        }
+
+        if (block.uuid) {
+          return { ...block, voided: true };
+        }
+
+        return null;
+      })
+      .filter((block): block is AvailabilityBlockFormValue => block !== null);
+  }
+
+  const copies = targetDays.flatMap((targetDay) =>
+    sourceBlocks.map((sourceBlock) => ({
+      clientId: crypto.randomUUID(),
+      dayOfWeek: targetDay,
+      startTime: sourceBlock.startTime,
+      endTime: sourceBlock.endTime,
+      maxAppointmentsLimit: sourceBlock.maxAppointmentsLimit,
+      voided: false,
+    })),
+  );
+
+  return [...nextBlocks, ...copies];
+}