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

package/src/constants.ts

@@ -0,0 +1,21 @@
+export const moduleName = '@palladium-ethiopia/esm-appointments-admin-app';
+
+export const appointmentServiceAdminBasePath = `${window.spaBase}/appointment-service-admin`;
+
+/** Workspace registration names. */
+export const APPOINTMENT_SERVICE_ADMIN_WORKSPACE = 'appointment-service-admin-workspace';
+
+/** WorkspaceContainer context key for the admin page. */
+export const APPOINTMENT_SERVICE_ADMIN_CONTEXT_KEY = 'appointment-service-admin';
+
+/** REST endpoints for Bahmni appointment service definitions. */
+export const appointmentServiceListUrl = '/ws/rest/v1/appointmentService/all/full';
+
+/** Single service by uuid: GET ?uuid={uuid}; POST to create/update. */
+export const appointmentServiceUrl = '/ws/rest/v1/appointmentService';
+
+export const DAYS_OF_WEEK = ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY'] as const;
+
+export type DayOfWeek = (typeof DAYS_OF_WEEK)[number];
+
+export const WEEKDAYS: Array<DayOfWeek> = ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY'];

package/src/declarations.d.ts

@@ -0,0 +1,2 @@
+declare module '*.css';
+declare module '*.scss';

package/src/extensions/appointment-service-admin-nav-link.extension.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar } from '@carbon/react/icons';
+import { UserHasAccess, useConfig } from '@openmrs/esm-framework';
+import NavTileLink from '../components/nav-tile-link.component';
+import { appointmentServiceAdminBasePath } from '../constants';
+import type { ConfigObject } from '../config-schema';
+
+interface AppointmentServiceAdminNavLinkProps {
+  hideOverlay: (hide: boolean) => void;
+}
+
+const AppointmentServiceAdminNavLink: React.FC<AppointmentServiceAdminNavLinkProps> = ({ hideOverlay }) => {
+  const { t } = useTranslation();
+  const { appointmentServiceAdminPrivilege } = useConfig<ConfigObject>();
+
+  return (
+    <UserHasAccess privilege={appointmentServiceAdminPrivilege}>
+      <NavTileLink
+        hideOverlay={hideOverlay}
+        icon={<Calendar size={24} />}
+        label={t('appointmentServiceAdmin', 'Appointment service admin')}
+        to={appointmentServiceAdminBasePath}
+      />
+    </UserHasAccess>
+  );
+};
+
+export default AppointmentServiceAdminNavLink;

package/src/home/appointment-services-table.component.tsx

@@ -0,0 +1,126 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
+import { useAppointmentServices } from '../api/appointment-service.resource';
+import { APPOINTMENT_SERVICE_ADMIN_WORKSPACE } from '../constants';
+import type { AppointmentService } from '../types';
+import styles from './appointment-services-table.scss';
+
+function getWeeklyBlockCount(service: AppointmentService): number {
+  return service.weeklyAvailability?.length ?? 0;
+}
+
+const AppointmentServicesTable: React.FC = () => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const { appointmentServices, isLoading, error } = useAppointmentServices();
+  const buttonSize = layout === 'tablet' ? 'md' : 'sm';
+
+  const headers = useMemo(
+    () => [
+      { key: 'name', header: t('serviceName', 'Service name') },
+      { key: 'maxAppointmentsLimit', header: t('maxAppointmentsLimit', 'Max appointments') },
+      { key: 'weeklyBlocks', header: t('weeklyBlocks', 'Weekly blocks') },
+      { key: 'actions', header: t('actions', 'Actions') },
+    ],
+    [t],
+  );
+
+  const rows = useMemo(
+    () =>
+      appointmentServices.map((service) => {
+        const weeklyBlockCount = getWeeklyBlockCount(service);
+        return {
+          id: service.uuid,
+          name: service.name,
+          maxAppointmentsLimit:
+            service.maxAppointmentsLimit != null ? String(service.maxAppointmentsLimit) : t('notSet', 'Not set'),
+          weeklyBlocks:
+            weeklyBlockCount > 0
+              ? t('weeklyBlocksCount', '{{count}} block(s)', { count: weeklyBlockCount })
+              : t('notConfigured', 'Not configured'),
+          actions: service.uuid,
+        };
+      }),
+    [appointmentServices, t],
+  );
+
+  const handleConfigure = (serviceUuid: string) => {
+    const service = appointmentServices.find((item) => item.uuid === serviceUuid);
+    if (!service) {
+      return;
+    }
+
+    launchWorkspace(APPOINTMENT_SERVICE_ADMIN_WORKSPACE, {
+      workspaceTitle: t('configureServiceTitle', 'Configure {{serviceName}}', { serviceName: service.name }),
+      appointmentService: service,
+    });
+  };
+
+  if (isLoading) {
+    return <DataTableSkeleton columnCount={headers.length} rowCount={5} />;
+  }
+
+  if (error) {
+    return <p>{t('errorLoadingServices', 'Error loading appointment services')}</p>;
+  }
+
+  if (appointmentServices.length === 0) {
+    return <p>{t('noAppointmentServices', 'No appointment services found')}</p>;
+  }
+
+  return (
+    <DataTable headers={headers} rows={rows} size={buttonSize}>
+      {({ rows: tableRows, headers: tableHeaders, getTableProps, getHeaderProps, getRowProps }) => (
+        <TableContainer title={t('appointmentServices', 'Appointment services')} className={styles.tableContainer}>
+          <Table {...getTableProps()}>
+            <TableHead>
+              <TableRow>
+                {tableHeaders.map((header) => (
+                  <TableHeader {...getHeaderProps({ header })} key={header.key}>
+                    {header.header}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {tableRows.map((row) => (
+                <TableRow {...getRowProps({ row })} key={row.id}>
+                  {row.cells.map((cell) =>
+                    cell.info.header === 'actions' ? (
+                      <TableCell key={cell.id}>
+                        <Button
+                          className={styles.configureButton}
+                          kind="ghost"
+                          size={buttonSize}
+                          onClick={() => handleConfigure(cell.value)}>
+                          {t('configure', 'Configure')}
+                        </Button>
+                      </TableCell>
+                    ) : (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ),
+                  )}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
+    </DataTable>
+  );
+};
+
+export default AppointmentServicesTable;

package/src/home/appointment-services-table.scss

@@ -0,0 +1,15 @@
+@use '@carbon/layout';
+
+.toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: layout.$spacing-05;
+}
+
+.tableContainer {
+  block-size: 100%;
+}
+
+.configureButton {
+  max-inline-size: fit-content;
+}

package/src/home/dashboard.component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import AppointmentServicesTable from './appointment-services-table.component';
+import styles from './home.scss';
+
+const AppointmentServiceAdminDashboard: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.dashboard}>
+      <h4>{t('appointmentServiceAdmin', 'Appointment service admin')}</h4>
+      <AppointmentServicesTable />
+    </div>
+  );
+};
+
+export default AppointmentServiceAdminDashboard;

package/src/home/home.component.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { WorkspaceContainer } from '@openmrs/esm-framework';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { APPOINTMENT_SERVICE_ADMIN_CONTEXT_KEY, appointmentServiceAdminBasePath } from '../constants';
+import AppointmentServiceAdminDashboard from './dashboard.component';
+import styles from './home.scss';
+
+const AppointmentServiceAdminHome: React.FC = () => {
+  return (
+    <BrowserRouter basename={appointmentServiceAdminBasePath}>
+      <main className={styles.container}>
+        <Routes>
+          <Route path="/" element={<AppointmentServiceAdminDashboard />} />
+          <Route path="/*" element={<AppointmentServiceAdminDashboard />} />
+        </Routes>
+      </main>
+      <WorkspaceContainer
+        key={APPOINTMENT_SERVICE_ADMIN_CONTEXT_KEY}
+        contextKey={APPOINTMENT_SERVICE_ADMIN_CONTEXT_KEY}
+      />
+    </BrowserRouter>
+  );
+};
+
+export default AppointmentServiceAdminHome;

package/src/home/home.scss

@@ -0,0 +1,14 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.container {
+  background-color: colors.$white-0;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .container {
+  margin-left: var(--omrs-sidenav-width);
+}
+
+.dashboard {
+  padding: layout.$spacing-05;
+}

package/src/index.ts

@@ -0,0 +1,33 @@
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { moduleName } from './constants';
+
+// Extensions
+import AppointmentServiceAdminNavLink from './extensions/appointment-service-admin-nav-link.extension';
+
+// Workspaces
+import AppointmentServiceAdminWorkspace from './workspace/appointment-service-admin.workspace';
+
+const options = {
+  featureName: 'appointment-service-admin',
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+// Register synchronously so frontend config keys are recognized at bootstrap.
+defineConfigSchema(moduleName, configSchema);
+
+export function startupApp() {}
+
+export const appointmentServiceAdminHome = getAsyncLifecycle(() => import('./home/home.component'), options);
+
+export const appointmentServiceAdminNavLink = getSyncLifecycle(AppointmentServiceAdminNavLink, {
+  featureName: 'appointment-service-admin-nav-link',
+  moduleName,
+});
+
+export const appointmentServiceAdminWorkspace = getSyncLifecycle(AppointmentServiceAdminWorkspace, {
+  featureName: 'appointment-service-admin-workspace',
+  moduleName,
+});

package/src/routes.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "webservices.rest": ">=2.2.0",
+    "appointments": ">=2.0.0"
+  },
+  "pages": [
+    {
+      "component": "appointmentServiceAdminHome",
+      "route": "appointment-service-admin",
+      "online": true,
+      "offline": false
+    }
+  ],
+  "extensions": [
+    {
+      "name": "appointment-service-admin-nav-link",
+      "component": "appointmentServiceAdminNavLink",
+      "slot": "navbar-items-slot",
+      "online": true,
+      "offline": false
+    }
+  ],
+  "workspaces": [
+    {
+      "name": "appointment-service-admin-workspace",
+      "component": "appointmentServiceAdminWorkspace",
+      "title": "Configure appointment service",
+      "type": "other-form",
+      "width": "extra-wide",
+      "canHide": true,
+      "canMaximize": true
+    }
+  ]
+}

package/src/types/index.ts

@@ -0,0 +1,63 @@
+export interface WeeklyAvailability {
+  dayOfWeek: string;
+  startTime: string;
+  endTime: string;
+  maxAppointmentsLimit?: number | null;
+  uuid?: string;
+  voided?: boolean;
+}
+
+export interface AppointmentService {
+  uuid: string;
+  name: string;
+  description?: string;
+  startTime?: string;
+  endTime?: string;
+  maxAppointmentsLimit?: number | null;
+  durationMins?: number | null;
+  weeklyAvailability?: Array<WeeklyAvailability>;
+  color?: string;
+  initialAppointmentStatus?: string;
+  location?: { uuid: string; display?: string; name?: string };
+  speciality?: { uuid: string; display?: string; name?: string };
+  serviceTypes?: Array<{ uuid: string; name: string; duration?: number }>;
+}
+
+export interface WeeklyAvailabilityPayload {
+  uuid?: string;
+  dayOfWeek: string;
+  startTime?: string;
+  endTime?: string;
+  maxAppointmentsLimit?: number | null;
+  voided?: boolean;
+}
+
+export interface AppointmentServiceSavePayload {
+  uuid: string;
+  name: string;
+  description?: string;
+  specialityUuid?: string;
+  locationUuid?: string;
+  startTime?: string;
+  endTime?: string;
+  maxAppointmentsLimit?: number | null;
+  durationMins?: number | null;
+  color?: string;
+  initialAppointmentStatus?: string;
+  weeklyAvailability: Array<WeeklyAvailabilityPayload>;
+}
+
+export interface AvailabilityBlockFormValue {
+  clientId: string;
+  uuid?: string;
+  dayOfWeek: string;
+  startTime: string;
+  endTime: string;
+  maxAppointmentsLimit?: number | null;
+  voided?: boolean;
+}
+
+export interface AppointmentServiceFormValues {
+  maxAppointmentsLimit: number | null;
+  blocks: Array<AvailabilityBlockFormValue>;
+}

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

@@ -0,0 +1,81 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  block-size: 100%;
+}
+
+.formContainer {
+  flex: 1;
+  overflow-y: auto;
+  padding: layout.$spacing-05;
+}
+
+.serviceName {
+  @include type.type-style('heading-03');
+  margin-block-end: layout.$spacing-05;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-01');
+  margin-block: layout.$spacing-05 layout.$spacing-03;
+}
+
+.daySection {
+  border-block-end: 1px solid var(--cds-border-subtle);
+  margin-block-end: layout.$spacing-05;
+  padding-block-end: layout.$spacing-05;
+}
+
+.dayHeader {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-block-end: layout.$spacing-03;
+}
+
+.dayActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-02;
+}
+
+.dayTitle {
+  @include type.type-style('heading-compact-01');
+}
+
+.dayTotal {
+  @include type.type-style('helper-text-01');
+  color: var(--cds-text-secondary);
+  margin-block-start: layout.$spacing-03;
+}
+
+.blockRow {
+  align-items: flex-end;
+  display: grid;
+  gap: layout.$spacing-03;
+  grid-template-columns: 1fr 1fr 1fr auto;
+  margin-block-end: layout.$spacing-03;
+}
+
+.emptyDay {
+  @include type.type-style('body-compact-01');
+  color: var(--cds-text-secondary);
+  margin-block-end: layout.$spacing-03;
+}
+
+.buttonSet {
+  padding: layout.$spacing-05;
+}
+
+.buttonSetTablet {
+  padding-block-end: layout.$spacing-09;
+}
+
+.inlineLoading {
+  align-items: center;
+  display: flex;
+  gap: layout.$spacing-03;
+}