@digihmis/esm-outpatient-app 1.0.0

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

@@ -0,0 +1,313 @@
+import React, { useState, useMemo } from 'react';
+import {
+  DataTable,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Button,
+  TableContainer,
+  Tile,
+  Pagination,
+  Tag,
+  InlineLoading,
+  Search,
+} from '@carbon/react';
+import { CheckmarkFilled, Time } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { isDesktop, launchWorkspace, navigate, showSnackbar, useConfig, useLayoutType } from '@openmrs/esm-framework';
+import { useQueueEntries } from './queue-room-table.resource';
+import { useQueueActions } from './useQueueActions';
+import styles from './queue-room-table.scss';
+import { type QueueEntry } from './type';
+import capitalize from 'lodash/capitalize';
+
+interface QueueRoomTableProps {
+  queueRoomUuid: string;
+  queueUuid: string;
+}
+
+export const QueueRoomTable: React.FC<QueueRoomTableProps> = ({ queueRoomUuid, queueUuid }) => {
+  const { t } = useTranslation();
+  const config = useConfig();
+  const layout = useLayoutType();
+  const { servePatient, completeService } = useQueueActions();
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [processingUuid, setProcessingUuid] = useState<string | null>(null);
+
+  const { queueEntries, isLoading, mutate } = useQueueEntries(queueRoomUuid, queueUuid);
+
+  const filteredEntries = useMemo(() => {
+    if (!queueEntries) {
+      return [];
+    }
+    if (!searchTerm) {
+      return queueEntries;
+    }
+
+    const search = searchTerm.toLowerCase();
+    return queueEntries?.filter(
+      (entry) =>
+        entry?.patient?.display.toLowerCase().includes(search) ||
+        entry?.display.toLowerCase().includes(search) ||
+        entry?.queueRoomComingFrom?.display?.toLowerCase().includes(search),
+    );
+  }, [queueEntries, searchTerm]);
+
+  const paginatedEntries = useMemo(() => {
+    const start = (page - 1) * pageSize;
+    return filteredEntries.slice(start, start + pageSize);
+  }, [filteredEntries, page, pageSize]);
+
+  const calculateWaitTime = (startedAt: string) => {
+    const start = new Date(startedAt);
+    const now = new Date();
+    const diffMs = now.getTime() - start.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    return diffMins;
+  };
+
+  const getPriorityColor = (priority: string) => {
+    const lower = priority.toLowerCase();
+    if (lower.includes('emergency')) {
+      return 'red';
+    }
+    if (lower.includes('urgent')) {
+      return 'magenta';
+    }
+    if (lower.includes('priority')) {
+      return 'purple';
+    }
+    return 'gray';
+  };
+
+  const handleServePatient = async (entry: QueueEntry) => {
+    setProcessingUuid(entry.uuid);
+
+    try {
+      await servePatient(entry.uuid);
+      navigate({ to: `${window.spaBase}/home/outpatient/patient/${entry?.patient?.uuid}/file` });
+
+      showSnackbar({
+        title: t('patientServed', 'Patient Served'),
+        subtitle: t('patientServedMessage', `${entry?.patient?.person?.display} is now being served`),
+        kind: 'success',
+        timeoutInMs: 3000,
+      });
+
+      mutate();
+    } catch (error) {
+      console.error('Error serving patient:', error);
+
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: t('servePatientError', 'Failed to serve patient. Please try again.'),
+        kind: 'error',
+        timeoutInMs: 5000,
+      });
+    } finally {
+      setProcessingUuid(null);
+    }
+  };
+
+  const headers = [
+    { key: 'position', header: '#' },
+    { key: 'patientName', header: t('patient', 'Patient') },
+    { key: 'age', header: t('age', 'Age') },
+    { key: 'gender', header: t('gender', 'Gender') },
+    { key: 'comingFrom', header: t('comingFrom', 'Coming From') },
+    { key: 'waitTime', header: t('waitTime', 'Wait Time') },
+    { key: 'priority', header: t('priority', 'Priority') },
+    { key: 'status', header: t('status', 'Status') },
+    { key: 'actions', header: t('actions', 'Actions') },
+    { key: 'statusUuid', header: '' },
+    { key: 'patientUuid', header: '' },
+    { key: 'entryUuid', header: '' },
+    { key: 'priorityColor', header: '' },
+    { key: 'entry', header: '' },
+  ];
+
+  const rows = paginatedEntries?.map((entry, index) => {
+    const patientUuid = entry?.patient?.uuid || '';
+    const statusUuid = entry?.status?.uuid || '';
+    const entryUuid = entry?.uuid || '';
+
+    return {
+      id: entryUuid,
+      position: (page - 1) * pageSize + index + 1,
+      patientName: capitalize(entry?.patient?.person?.display || ''),
+      patientUuid: patientUuid,
+      age: entry?.patient?.person?.age,
+      gender: entry?.patient?.person?.gender === 'M' ? t('male', 'Male') : t('female', 'Female'),
+      comingFrom: entry?.queueRoomComingFrom?.display || t('direct', 'Direct Entry'),
+      priority: entry?.priority?.display || t('normal', 'Normal'),
+      priorityColor: getPriorityColor(entry?.priority?.display || ''),
+      waitTime: calculateWaitTime(entry?.startedAt),
+      status: entry?.status?.display,
+      statusUuid: statusUuid,
+      entryUuid: entryUuid,
+      entry: entry,
+    };
+  });
+
+  if (isLoading) {
+    return (
+      <div className={styles.loadingContainer}>
+        <InlineLoading description={t('loadingQueue', 'Loading queue...')} />
+      </div>
+    );
+  }
+
+  if (!queueEntries || queueEntries?.length === 0) {
+    return (
+      <div className={styles.emptyStateContainer}>
+        <Tile className={styles.tile}>
+          <div className={styles.tileContent}>
+            <p className={styles.content}>{t('noPatients', 'No patients in queue')}</p>
+            <p className={styles.emptyStateHelperText}>
+              {t('noPatientsDescription', 'There are currently no patients waiting in this queue room.')}
+            </p>
+          </div>
+        </Tile>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.tableContainer}>
+      <Search
+        labelText={t('filterPatients', 'Filter patients')}
+        placeholder={t('filterPatients', 'Filter patients')}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        size={isDesktop(layout) ? 'sm' : 'lg'}
+      />
+      <DataTable rows={rows} headers={headers} size={isDesktop(layout) ? 'sm' : 'lg'} useZebraStyles={rows?.length > 1}>
+        {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
+          <TableContainer className={styles.tableContainer}>
+            <Table className={styles.activeVisitsTable} {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map(
+                    (header) =>
+                      header.header && (
+                        <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                          {header.header}
+                        </TableHeader>
+                      ),
+                  )}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.id} {...getRowProps({ row })}>
+                    {row.cells.map((cell) => {
+                      if (
+                        ['statusUuid', 'patientUuid', 'entryUuid', 'priorityColor', 'entry'].includes(cell.info.header)
+                      ) {
+                        return null;
+                      }
+
+                      if (cell.info.header === 'comingFrom') {
+                        return (
+                          <TableCell key={cell.id}>
+                            <Tag type="cyan" size="md">
+                              {cell.value}
+                            </Tag>
+                          </TableCell>
+                        );
+                      }
+
+                      if (cell.info.header === 'priority') {
+                        return (
+                          <TableCell key={cell.id}>
+                            <Tag type={row.cells.find((c) => c.info.header === 'priorityColor')?.value}>
+                              {cell.value}
+                            </Tag>
+                          </TableCell>
+                        );
+                      }
+
+                      if (cell.info.header === 'waitTime') {
+                        const mins = cell.value;
+                        const hours = Math.floor(mins / 60);
+                        const minutes = mins % 60;
+                        const displayTime = hours > 0 ? `${hours}h ${minutes}min` : `${minutes}min`;
+
+                        return (
+                          <TableCell key={cell.id}>
+                            <div className={styles.waitTime}>
+                              <Time size={16} />
+                              <span className={mins > 60 ? styles.longWait : ''}>{displayTime}</span>
+                            </div>
+                          </TableCell>
+                        );
+                      }
+
+                      if (cell.info.header === 'status') {
+                        const statusUuid = row.cells.find((c) => c.info.header === 'statusUuid')?.value;
+                        const isWaiting = statusUuid === config.concepts.waitingStatusUuid;
+                        const isInService = statusUuid === config.concepts.inServiceStatusUuid;
+
+                        return (
+                          <TableCell key={cell.id}>
+                            <Tag type={isWaiting ? 'blue' : isInService ? 'green' : 'gray'}>{cell.value}</Tag>
+                          </TableCell>
+                        );
+                      }
+
+                      if (cell.info.header === 'actions') {
+                        const entryUuid = row.cells.find((c) => c.info.header === 'entryUuid')?.value as string;
+                        const statusUuid = row.cells.find((c) => c.info.header === 'statusUuid')?.value as string;
+                        const entry = row.cells.find((c) => c.info.header === 'entry')?.value as QueueEntry;
+
+                        const isProcessing = processingUuid === entryUuid;
+                        const isWaiting = statusUuid === config.concepts.waitingStatusUuid;
+                        const isInService = statusUuid === config.concepts.inServiceStatusUuid;
+                        return (
+                          <TableCell key={cell.id}>
+                            <div className={styles.actions}>
+                              {(isWaiting || isInService) && (
+                                <Button
+                                  kind="primary"
+                                  size="sm"
+                                  renderIcon={CheckmarkFilled}
+                                  onClick={() => handleServePatient(entry)}
+                                  disabled={isProcessing}>
+                                  {isProcessing
+                                    ? t('servePatientLoading', 'Serving Patient...')
+                                    : t('servePatient', 'Serve Patient')}
+                                </Button>
+                              )}
+                            </div>
+                          </TableCell>
+                        );
+                      }
+
+                      return <TableCell key={cell.id}>{cell.value}</TableCell>;
+                    })}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      <Pagination
+        className={styles.pagination}
+        page={page}
+        pageSize={pageSize}
+        pageSizes={[10, 20, 30, 50]}
+        totalItems={filteredEntries.length}
+        onChange={({ page, pageSize }) => {
+          setPage(page);
+          setPageSize(pageSize);
+        }}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,73 @@
+import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { type QueueEntry } from './type';
+
+export const useQueueEntries = (queueRoomUuid: string, queueUuid: string) => {
+  const customRepresentation =
+    'custom:(uuid,display,patient:(uuid,display,person:(display,age,gender)),priority:(uuid,display),status:(uuid,display),visit:(uuid),startedAt,sortWeight,queueRoom:(uuid,display),queueRoomComingFrom:(uuid,display))';
+
+  const params = new URLSearchParams();
+  params.append('v', customRepresentation);
+  params.append('queue', queueUuid);
+  params.append('queueRoom', queueRoomUuid);
+  params.append('isEnded', 'false');
+
+  const apiUrl = `${restBaseUrl}/queue-entry?${params.toString()}`;
+
+  const { data, error, mutate, isLoading, isValidating } = useSWR<FetchResponse<{ results: Array<QueueEntry> }>>(
+    queueRoomUuid ? apiUrl : null,
+    openmrsFetch,
+    {
+      refreshInterval: 30000,
+      revalidateOnFocus: true,
+    },
+  );
+
+  const sortedEntries = data?.data?.results?.sort((a, b) => {
+    const priorityOrder: Record<string, number> = {
+      emergency: 0,
+      urgent: 1,
+      priority: 2,
+      normal: 3,
+    };
+
+    const aPriority = a.priority?.display?.toLowerCase() || 'normal';
+    const bPriority = b.priority?.display?.toLowerCase() || 'normal';
+
+    const aOrder = priorityOrder[aPriority] ?? 3;
+    const bOrder = priorityOrder[bPriority] ?? 3;
+
+    if (aOrder !== bOrder) {
+      return aOrder - bOrder;
+    }
+
+    return (a.sortWeight || 0) - (b.sortWeight || 0);
+  });
+
+  return {
+    queueEntries: sortedEntries || [],
+    isLoading,
+    error,
+    mutate,
+    isValidating,
+  };
+};
+
+export const updateQueueEntryStatus = async (
+  queueEntryUuid: string,
+  statusUuid: string,
+  completedStatusUuid: string,
+) => {
+  const url = `${restBaseUrl}/queue-entry/${queueEntryUuid}`;
+
+  return openmrsFetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      status: statusUuid,
+      endedAt: statusUuid === completedStatusUuid ? new Date().toISOString() : undefined,
+    }),
+  });
+};

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

@@ -0,0 +1,193 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.activeVisitsContainer {
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  width: 100%;
+  margin: 1rem auto;
+  max-width: 95vw;
+  padding-bottom: 0;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    margin: 0.5rem auto;
+    max-width: 100vw;
+    border-left: none;
+    border-right: none;
+  }
+}
+
+.tableContainer {
+  width: 100%;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    overflow-x: auto;
+  }
+}
+
+.activeVisitsTable {
+  width: 100%;
+
+  th,
+  td {
+    white-space: nowrap;
+    text-align: left;
+  }
+
+  tbody tr[data-parent-row] {
+    &:nth-last-of-type(2) > td {
+      border-bottom: none;
+    }
+  }
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    th,
+    td {
+      padding: layout.$spacing-03;
+      font-size: 0.875rem;
+    }
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    th,
+    td {
+      padding: layout.$spacing-02;
+      font-size: 0.8125rem;
+    }
+  }
+}
+
+.loadingContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: layout.$spacing-07;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-05;
+  }
+}
+
+.emptyStateContainer {
+  border: 1px solid colors.$gray-20;
+  padding: 3rem 0;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    padding: 2rem 0;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: 1.5rem 0;
+    border-left: none;
+    border-right: none;
+  }
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+  background: colors.$gray-20;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    width: 90%;
+    padding: layout.$spacing-04;
+  }
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    text-align: center;
+  }
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-03;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    @include type.type-style('heading-compact-01');
+  }
+}
+
+.emptyStateHelperText {
+  :global(.omrs-breakpoint-lt-tablet) & {
+    font-size: 0.875rem;
+    padding: 0 layout.$spacing-03;
+  }
+}
+
+.waitTime {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    gap: layout.$spacing-01;
+    font-size: 0.75rem;
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+
+.longWait {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    gap: layout.$spacing-02;
+  }
+}
+
+.actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  // flex-wrap: wrap;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    gap: layout.$spacing-02;
+    flex-direction: row;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    gap: layout.$spacing-02;
+    flex-direction: row;
+
+    button {
+      font-size: 0.75rem;
+      padding: layout.$spacing-02 layout.$spacing-03;
+    }
+  }
+}
+
+.pagination {
+  background-color: colors.$gray-20;
+  border: 1px solid colors.$gray-20;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    font-size: 0.875rem;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    flex-wrap: wrap;
+    padding: layout.$spacing-03;
+
+    :global(.cds--pagination__left),
+    :global(.cds--pagination__right) {
+      width: 100%;
+      justify-content: center;
+      margin: layout.$spacing-02 0;
+    }
+  }
+}

package/src/queue-room-table/type/index.ts

@@ -0,0 +1,34 @@
+export interface QueueEntry {
+  uuid: string;
+  display: string;
+  patient: {
+    uuid: string;
+    display: string;
+    person: {
+      display: string;
+      age: number;
+      gender: string;
+    };
+  };
+  priority: {
+    uuid: string;
+    display: string;
+  };
+  status: {
+    uuid: string;
+    display: string;
+  };
+  visit: {
+    uuid: string;
+  };
+  queueRoom: {
+    uuid: string;
+    display: string;
+  };
+  queueRoomComingFrom?: {
+    uuid: string;
+    display: string;
+  };
+  startedAt: string;
+  sortWeight: number;
+}

package/src/queue-room-table/useQueueActions.ts

@@ -0,0 +1,24 @@
+import { useConfig } from '@openmrs/esm-framework';
+import { updateQueueEntryStatus } from './queue-room-table.resource';
+
+export const useQueueActions = () => {
+  const config = useConfig();
+
+  const servePatient = async (queueEntryUuid: string) => {
+    return updateQueueEntryStatus(
+      queueEntryUuid,
+      config.concepts.inServiceStatusUuid,
+      config.concepts.completedStatusUuid,
+    );
+  };
+
+  const completeService = async (queueEntryUuid: string) => {
+    return updateQueueEntryStatus(
+      queueEntryUuid,
+      config.concepts.completedStatusUuid,
+      config.concepts.completedStatusUuid,
+    );
+  };
+
+  return { servePatient, completeService };
+};

package/src/routes.json

@@ -0,0 +1,55 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "fhir2": ">=1.2",
+    "webservices.rest": "^2.24.0"
+  },
+  "extensions": [
+    {
+      "name": "outpatient-dashboard-header",
+      "slot": "outpatient-sidebar-slot",
+      "component": "outpatientDashboardHeader",
+      "order": 0,
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "outpatient-db-link",
+      "slot": "outpatient-dashboard-slot",
+      "component": "leftPanelLink",
+      "meta": {
+        "name": "outpatient",
+        "slot": "outpatient-homepage-dashboard-slot",
+        "title": "Outpatient queue"
+      },
+      "order": 1,
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "outpatient-queue-dashboard",
+      "slot": "outpatient-homepage-dashboard-slot",
+      "component": "outpatientQueueDashboard"
+    },
+    {
+      "name": "care-panel-link",
+      "slot": "outpatient-dashboard-slot",
+      "component": "carePanelLink",
+      "meta": {
+        "name": "outpatient/patient/:patientUuid/file",
+        "slot": "outpatient-file-dashboard-slot",
+        "title": "Care panel",
+        "showOnlyOnRoute": "/file"
+      },
+      "order": 2,
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "care-panel-history",
+        "slot": "outpatient-file-dashboard-slot",
+      "component": "carePanel"
+    }
+  ],
+  "workspaces": []
+}

package/src/setup-tests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';