@digihmis/esm-administration-app 1.0.0

package/src/queue-management/queue-management-table/queue-management-table.component.tsx

@@ -0,0 +1,296 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Layer,
+  Pagination,
+  Tile,
+} from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import { launchWorkspace, useLayoutType, ErrorState } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import styles from './queue-management-table.scss';
+import { useQueueRooms, useQueuesMutable } from './queue-management.resource';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+const QueueManagementTable = () => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isTablet = layout === 'tablet';
+  const responsiveSize = isTablet ? 'lg' : 'sm';
+
+  const { queues, isLoading: isLoadingQueues, error: queuesError } = useQueuesMutable();
+  const { queueRooms, isLoading: isLoadingQueueRooms, error: queueRoomsError } = useQueueRooms();
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [currentPageSize, setCurrentPageSize] = useState(10);
+  const pageSizes = [10, 20, 30, 40, 50];
+
+  const [currentRoomPage, setCurrentRoomPage] = useState(1);
+  const [currentRoomPageSize, setCurrentRoomPageSize] = useState(10);
+
+  const queueTableHeaders = [
+    {
+      key: 'name',
+      header: t('name', 'Name'),
+    },
+    {
+      key: 'description',
+      header: t('description', 'Description'),
+    },
+    {
+      key: 'service',
+      header: t('service', 'Service'),
+    },
+    {
+      key: 'location',
+      header: t('location', 'Location'),
+    },
+  ];
+
+  const queueRoomTableHeaders = [
+    {
+      key: 'name',
+      header: t('name', 'Name'),
+    },
+    {
+      key: 'description',
+      header: t('description', 'Description'),
+    },
+    {
+      key: 'queue',
+      header: t('queue', 'Queue'),
+    },
+  ];
+
+  const queueTableRows = useMemo(() => {
+    return (
+      queues?.map((queue) => ({
+        id: queue.uuid,
+        name: queue.name || queue.display,
+        description: queue.description || '--',
+        service: queue.service?.display || '--',
+        location: queue.location?.display || '--',
+      })) || []
+    );
+  }, [queues]);
+
+  const queueRoomTableRows = useMemo(() => {
+    return (
+      queueRooms?.map((room) => ({
+        id: room.uuid,
+        name: room.name || room.display,
+        description: room.description || '--',
+        queue: (room as any).queue?.display || '--',
+      })) || []
+    );
+  }, [queueRooms]);
+
+  // Paginated queue rows
+  const paginatedQueueRows = useMemo(() => {
+    const startIndex = (currentPage - 1) * currentPageSize;
+    const endIndex = startIndex + currentPageSize;
+    return queueTableRows.slice(startIndex, endIndex);
+  }, [queueTableRows, currentPage, currentPageSize]);
+
+  // Paginated queue room rows
+  const paginatedQueueRoomRows = useMemo(() => {
+    const startIndex = (currentRoomPage - 1) * currentRoomPageSize;
+    const endIndex = startIndex + currentRoomPageSize;
+    return queueRoomTableRows.slice(startIndex, endIndex);
+  }, [queueRoomTableRows, currentRoomPage, currentRoomPageSize]);
+
+  const handleAddQueue = () => {
+    launchWorkspace('service-queues-service-form');
+  };
+
+  const handleAddQueueRoom = () => {
+    launchWorkspace('service-queues-room-workspace');
+  };
+
+  if (isLoadingQueues || isLoadingQueueRooms) {
+    return (
+      <div className={styles.adminPage}>
+        <div className={styles.section}>
+          <h3>{t('queues', 'Queues')}</h3>
+          <DataTableSkeleton role="progressbar" compact={!isTablet} zebra />
+        </div>
+        <div className={styles.section}>
+          <h3>{t('queueRooms', 'Queue Rooms')}</h3>
+          <DataTableSkeleton role="progressbar" compact={!isTablet} zebra />
+        </div>
+      </div>
+    );
+  }
+
+  if (queuesError) {
+    return (
+      <div className={styles.adminPage}>
+        <ErrorState error={queuesError} headerTitle={t('queues', 'Queues')} />
+      </div>
+    );
+  }
+
+  if (queueRoomsError) {
+    return (
+      <div className={styles.adminPage}>
+        <ErrorState error={queueRoomsError} headerTitle={t('queueRooms', 'Queue Rooms')} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.adminPage}>
+      <div className={styles.section}>
+        <CardHeader title={t('queues', 'Queues')}>
+          <Button kind="ghost" renderIcon={(props) => <Add size={16} {...props} />} onClick={handleAddQueue}>
+            {t('addQueue', 'Add Queue')}
+          </Button>
+        </CardHeader>
+        <Layer>
+          <DataTable
+            rows={paginatedQueueRows}
+            headers={queueTableHeaders}
+            isSortable
+            size={responsiveSize}
+            useZebraStyles>
+            {({ rows, headers, getTableProps }) => (
+              <TableContainer>
+                <Table {...getTableProps()}>
+                  <TableHead>
+                    <TableRow>
+                      {headers.map((header) => (
+                        <TableHeader key={header.key}>{header.header}</TableHeader>
+                      ))}
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {rows.map((row) => (
+                      <TableRow key={row.id}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+                {queueTableRows.length === 0 ? (
+                  <div className={styles.tileContainer}>
+                    <Tile className={styles.tile}>
+                      <div className={styles.tileContent}>
+                        <p className={styles.content}>{t('noQueuesFound', 'No queues found')}</p>
+                        <p className={styles.emptyStateHelperText}>
+                          {t('checkFilters', 'Please check the filters above and try again')}
+                        </p>
+                      </div>
+                    </Tile>
+                  </div>
+                ) : null}
+                {queueTableRows.length > 0 && (
+                  <Pagination
+                    forwardText={t('nextPage', 'Next page')}
+                    backwardText={t('previousPage', 'Previous page')}
+                    page={currentPage}
+                    pageSize={currentPageSize}
+                    pageSizes={pageSizes}
+                    totalItems={queueTableRows.length}
+                    className={styles.pagination}
+                    onChange={({ pageSize, page }) => {
+                      if (pageSize !== currentPageSize) {
+                        setCurrentPageSize(pageSize);
+                        setCurrentPage(1);
+                      }
+                      if (page !== currentPage) {
+                        setCurrentPage(page);
+                      }
+                    }}
+                  />
+                )}
+              </TableContainer>
+            )}
+          </DataTable>
+        </Layer>
+      </div>
+
+      <div className={styles.section}>
+        <CardHeader title={t('queueRooms', 'Queue Rooms')}>
+          <Button kind="ghost" renderIcon={(props) => <Add size={16} {...props} />} onClick={handleAddQueueRoom}>
+            {t('addQueueRoom', 'Add Queue Room')}
+          </Button>
+        </CardHeader>
+        <Layer>
+          <DataTable
+            rows={paginatedQueueRoomRows}
+            headers={queueRoomTableHeaders}
+            isSortable
+            size={responsiveSize}
+            useZebraStyles>
+            {({ rows, headers, getTableProps }) => (
+              <TableContainer>
+                <Table {...getTableProps()}>
+                  <TableHead>
+                    <TableRow>
+                      {headers.map((header) => (
+                        <TableHeader key={header.key}>{header.header}</TableHeader>
+                      ))}
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {rows.map((row) => (
+                      <TableRow key={row.id}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+                {queueRoomTableRows.length === 0 ? (
+                  <div className={styles.tileContainer}>
+                    <Tile className={styles.tile}>
+                      <div className={styles.tileContent}>
+                        <p className={styles.content}>{t('noQueueRoomsFound', 'No queue rooms found')}</p>
+                        <p className={styles.emptyStateHelperText}>
+                          {t('checkFilters', 'Please check the filters above and try again')}
+                        </p>
+                      </div>
+                    </Tile>
+                  </div>
+                ) : null}
+                {queueRoomTableRows.length > 0 && (
+                  <Pagination
+                    forwardText={t('nextPage', 'Next page')}
+                    backwardText={t('previousPage', 'Previous page')}
+                    page={currentRoomPage}
+                    pageSize={currentRoomPageSize}
+                    pageSizes={pageSizes}
+                    totalItems={queueRoomTableRows.length}
+                    className={styles.pagination}
+                    onChange={({ pageSize, page }) => {
+                      if (pageSize !== currentRoomPageSize) {
+                        setCurrentRoomPageSize(pageSize);
+                        setCurrentRoomPage(1);
+                      }
+                      if (page !== currentRoomPage) {
+                        setCurrentRoomPage(page);
+                      }
+                    }}
+                  />
+                )}
+              </TableContainer>
+            )}
+          </DataTable>
+        </Layer>
+      </div>
+    </div>
+  );
+};
+
+export default QueueManagementTable;

package/src/queue-management/queue-management-table/queue-management-table.scss

@@ -0,0 +1,78 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.adminPage {
+  padding: layout.$spacing-05;
+  background: var(--cds-field);
+}
+
+.section {
+  margin-bottom: layout.$spacing-07;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.sectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: layout.$spacing-05;
+  padding-bottom: layout.$spacing-03;
+  border-bottom: 1px solid var(--cds-border-subtle);
+
+  h3 {
+    margin: 0;
+    color: var(--cds-text-primary);
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+}
+
+@media (max-width: 768px) {
+  .adminPage {
+    padding: layout.$spacing-03;
+  }
+
+  .sectionHeader {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: layout.$spacing-03;
+
+    h3 {
+      font-size: 1.125rem;
+    }
+  }
+}
+.tileContainer {
+  border-top: 1px solid colors.$gray-20;
+  padding: 3rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+  background: colors.$gray-20;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-03;
+}
+
+.singleLineDisplay {
+  white-space: nowrap;
+}
+
+.emptyStateHelperText {
+  @include type.type-style('helper-text-02');
+}

package/src/queue-management/queue-management-table/queue-management.resource.ts

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import { getLocale, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type QueueRoom, type Queue } from '../queue-types';
+
+export function useQueuesMutable() {
+  const customRepresentation =
+    'custom:(uuid,display,name,description,service:(uuid,display),allowedPriorities:(uuid,display),allowedStatuses:(uuid,display),location:(uuid,display))';
+  const apiUrl = `${restBaseUrl}/queue?v=${customRepresentation}`;
+
+  const { data, ...rest } = useSWR<{ data: { results: Array<Queue> } }, Error>(apiUrl, openmrsFetch);
+
+  const queues = useMemo(
+    () => data?.data?.results.sort((a, b) => a.display.localeCompare(b.display, getLocale())) ?? [],
+    [data?.data?.results],
+  );
+
+  return {
+    queues,
+    ...rest,
+  };
+}
+
+export function useQueueRooms() {
+  const customRepresentation = 'custom:(uuid,display,name,description,queue:(uuid,display))';
+  const apiUrl = `${restBaseUrl}/queue-room?v=${customRepresentation}`;
+
+  const { data, ...rest } = useSWR<{ data: { results: Array<QueueRoom> } }, Error>(apiUrl, openmrsFetch);
+
+  const queueRooms = useMemo(
+    () => data?.data?.results.sort((a, b) => a.display.localeCompare(b.display, getLocale())) ?? [],
+    [data?.data?.results],
+  );
+
+  return {
+    queueRooms,
+    ...rest,
+  };
+}

package/src/queue-management/queue-management-workspace/queue-room/queue-room-form.scss

@@ -0,0 +1,56 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+$overlay-header-height: 5.5rem;
+
+.heading {
+  @include type.type-style('heading-compact-01');
+  margin: layout.$spacing-05 0 layout.$spacing-05;
+}
+
+.warningContainer {
+  background-color: $carbon--red-50;
+  padding: layout.$spacing-04;
+  margin: layout.$spacing-03 0 layout.$spacing-03;
+  display: flex;
+  justify-content: space-between;
+  .warning {
+    @include type.type-style('heading-compact-01');
+    color: $ui-05;
+  }
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.grid {
+  margin: 0 layout.$spacing-05;
+  padding: 0;
+}
+
+.input {
+  margin-top: layout.$spacing-04;
+}
+
+.button {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: $ui-02;
+}
+
+.desktop {
+  padding: 0;
+  margin-top: layout.$spacing-05;
+}

package/src/queue-management/queue-management-workspace/queue-room/queue-room-form.test.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { useLayoutType } from '@openmrs/esm-framework';
+import QueueRoomForm from './queue-room-form.workspace';
+
+const mockUseLayoutType = jest.mocked(useLayoutType);
+
+jest.mock('../../queue-management-workspace/queue-service/queue-service.resource.ts', () => ({
+  ...jest.requireActual('../../queue-management-workspace/queue-service/queue-service.resource.ts'),
+  useQueueLocations: jest.fn(() => ({
+    queueLocations: { uuid: 'e7786d9a-ab62-11ec-b909-0242ac120002', display: 'Location Test' },
+  })),
+}));
+
+const workspaceProps = {
+  closeWorkspace: jest.fn(),
+  promptBeforeClosing: jest.fn(),
+  closeWorkspaceWithSavedChanges: jest.fn(),
+  setTitle: jest.fn(),
+};
+
+jest.mock('./queue-room.resource', () => ({
+  saveQueueRoom: jest.fn(() => Promise.resolve({ status: 201 })),
+}));
+
+describe('QueueRoomForm', () => {
+  beforeEach(() => {
+    mockUseLayoutType.mockReturnValue('tablet');
+  });
+
+  it('renders the form with queue room elements', () => {
+    render(<QueueRoomForm {...workspaceProps} />);
+
+    expect(screen.getByLabelText('Queue room name')).toBeInTheDocument();
+    expect(screen.getByLabelText('Select a service')).toBeInTheDocument();
+    expect(screen.getByLabelText('Select a queue location')).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByText('Save')).toBeInTheDocument();
+  });
+
+  it('displays error notification if queue room name is missing on submission', async () => {
+    const user = userEvent.setup();
+
+    render(<QueueRoomForm {...workspaceProps} />);
+
+    await user.click(screen.getByText('Save'));
+    expect(screen.getByText('Missing queue room name')).toBeInTheDocument();
+  });
+
+  it('displays error notification if queue room service is missing on submission', async () => {
+    const user = userEvent.setup();
+
+    render(<QueueRoomForm {...workspaceProps} />);
+
+    const queueRoomNameInput = screen.getByLabelText('Queue room name');
+
+    await user.type(queueRoomNameInput, 'Room 123');
+    await user.click(screen.getByText('Save'));
+    expect(screen.getByText('Missing queue room service')).toBeInTheDocument();
+  });
+
+  it('calls closePanel when Cancel button is clicked', async () => {
+    const user = userEvent.setup();
+
+    const closeWorkspace = jest.fn();
+    render(<QueueRoomForm {...{ ...workspaceProps, closeWorkspace }} />);
+
+    await user.click(screen.getByText('Cancel'));
+    expect(closeWorkspace).toHaveBeenCalledTimes(1);
+  });
+
+  it('updates queue room name state when a value is entered', async () => {
+    const user = userEvent.setup();
+
+    render(<QueueRoomForm {...workspaceProps} />);
+
+    const queueRoomNameInput = screen.getByLabelText('Queue room name');
+    await user.type(queueRoomNameInput, 'Room 123');
+    expect(queueRoomNameInput).toHaveValue('Room 123');
+  });
+});