@digihmis/esm-triage-app 1.0.0

package/src/past-vitals/vitals-and-biometrics-header/vitals-header.scss

@@ -0,0 +1,233 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  background-color: $openmrs-background-grey;
+  padding: layout.$spacing-03 layout.$spacing-05 layout.$spacing-05;
+  border-bottom: 1px solid $ui-03;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-03 layout.$spacing-04 layout.$spacing-04;
+  }
+}
+
+.vitalsHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: layout.$spacing-07;
+  outline: none;
+  pointer-events: visibleFill;
+}
+
+.emptyStateVitalsHeader {
+  background-color: $openmrs-background-grey;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 layout.$spacing-05;
+  min-height: layout.$spacing-09;
+  outline: none;
+  pointer-events: visibleFill;
+  border-bottom: 1px solid $ui-03;
+
+  .container {
+    border-bottom: none;
+    padding: 0;
+  }
+
+  .bodyText {
+    margin-left: layout.$spacing-03;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: layout.$spacing-03 layout.$spacing-04;
+
+    .bodyText {
+      margin-left: 0;
+      margin-top: layout.$spacing-02;
+    }
+  }
+}
+
+.headerItems {
+  display: flex;
+  align-items: baseline;
+  flex-flow: row wrap;
+  gap: layout.$spacing-02 layout.$spacing-04;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: layout.$spacing-02;
+  }
+}
+
+.heading {
+  @include type.type-style('heading-compact-02');
+  color: $ui-05 !important;
+}
+
+.rowContainer {
+  width: 100%;
+  margin-top: layout.$spacing-04;
+}
+
+.row {
+  display: grid;
+  // Use auto-fit to dynamically adjust columns based on available space
+  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+  gap: layout.$spacing-04;
+  align-items: start;
+  max-width: 100%;
+
+  // Large desktop: allow up to 9 columns if there's space
+  @media (min-width: 1440px) {
+    grid-template-columns: repeat(9, 1fr);
+    gap: layout.$spacing-05;
+  }
+
+  // Desktop: 5 columns (better distribution)
+  @media (min-width: 1056px) and (max-width: 1439px) {
+    grid-template-columns: repeat(5, 1fr);
+    gap: layout.$spacing-04;
+  }
+
+  // Tablet landscape: 4 columns
+  :global(.omrs-breakpoint-lt-desktop) & {
+    grid-template-columns: repeat(4, 1fr);
+    gap: layout.$spacing-04;
+  }
+
+  // Tablet portrait: 3 columns
+  :global(.omrs-breakpoint-lt-tablet) & {
+    grid-template-columns: repeat(3, 1fr);
+    gap: layout.$spacing-03;
+  }
+
+  // Mobile: 2 columns
+  @media (max-width: 480px) {
+    grid-template-columns: repeat(2, 1fr);
+    gap: layout.$spacing-03;
+  }
+}
+
+// When workspace is open, force smaller grid
+.workspaceOpen {
+  .row {
+    grid-template-columns: repeat(4, 1fr);
+    gap: layout.$spacing-04;
+
+    // Tablet: 3 columns
+    :global(.omrs-breakpoint-lt-tablet) & {
+      grid-template-columns: repeat(3, 1fr);
+      gap: layout.$spacing-03;
+    }
+
+    // Mobile: 2 columns
+    @media (max-width: 480px) {
+      grid-template-columns: repeat(2, 1fr);
+      gap: layout.$spacing-03;
+    }
+  }
+}
+
+.loading {
+  display: flex;
+  background-color: $openmrs-background-grey;
+  justify-content: center;
+  align-items: center;
+  min-height: layout.$spacing-09;
+  padding: layout.$spacing-05;
+}
+
+.tag {
+  margin-right: 0;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    width: 100%;
+    margin-top: layout.$spacing-02;
+  }
+}
+
+.overdueIndicator {
+  display: flex;
+  align-items: center;
+  min-inline-size: max-content;
+  color: colors.$red-70;
+
+  svg {
+    margin-right: layout.$spacing-02;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    font-size: 0.875rem;
+  }
+}
+
+.buttonContainer {
+  display: flex;
+  align-items: center;
+  justify-content: right;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    width: 100%;
+    margin-top: layout.$spacing-03;
+  }
+}
+
+.recordVitalsButton {
+  @include type.type-style('body-compact-01');
+
+  &:not([disabled]) svg {
+    fill: $color-blue-60-2;
+  }
+}
+
+.recordVitalsIconButton {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  cursor: pointer;
+  margin-left: layout.$spacing-03;
+}
+
+.bodyText {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.link {
+  @extend .bodyText;
+  text-decoration-line: none;
+  color: $interactive-01;
+}
+
+.backgroundDataFetchingIndicator {
+  :global(.omrs-breakpoint-lt-tablet) & {
+    margin-top: layout.$spacing-02;
+  }
+}
+
+// RTL support
+html[dir='rtl'] {
+  .container {
+    & > span:nth-child(2) {
+      margin-right: layout.$spacing-03;
+    }
+  }
+
+  .overdueIndicator svg {
+    margin-right: 0;
+    margin-left: layout.$spacing-02;
+  }
+
+  .recordVitalsIconButton {
+    margin-left: 0;
+    margin-right: layout.$spacing-03;
+  }
+}

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

@@ -0,0 +1,380 @@
+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 { Activity, 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),
+    );
+  }, [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);
+
+      showSnackbar({
+        title: t('patientServed', 'Patient Served'),
+        subtitle: t('patientServedMessage', `${entry?.patient?.display} is now being served`),
+        kind: 'success',
+        timeoutInMs: 3000,
+      });
+
+      mutate();
+
+      launchWorkspace('record-vitals-workspace', {
+        workspaceTitle: t('recordVitals', 'Record Vitals'),
+        patientUuid: entry?.patient?.uuid,
+        queueEntryUuid: entry.uuid,
+        completeServiceCallback: async () => {
+          // This callback will be executed after vitals are saved and room transition is complete
+          try {
+            await completeService(entry.uuid);
+
+            showSnackbar({
+              title: t('serviceCompleted', 'Service Completed'),
+              subtitle: t('serviceCompletedMessage', `Service completed for ${entry.patient.display}`),
+              kind: 'success',
+              timeoutInMs: 3000,
+            });
+
+            mutate();
+          } catch (error) {
+            console.error('Error completing service:', error);
+            showSnackbar({
+              title: t('error', 'Error'),
+              subtitle: t('completeServiceError', 'Failed to complete service'),
+              kind: 'error',
+              timeoutInMs: 5000,
+            });
+          }
+        },
+      });
+    } 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 handleViewPastVitals = (patientUuid: string) => {
+    navigate({
+      to: `${window.spaBase}/home/triage/patient/${patientUuid}/vitals`,
+    });
+  };
+
+  const handleCompleteService = async (entry: QueueEntry) => {
+    setProcessingUuid(entry.uuid);
+
+    try {
+      await completeService(entry.uuid);
+
+      showSnackbar({
+        title: t('serviceCompleted', 'Service Completed'),
+        subtitle: t('patientServedMessage', `${entry?.patient?.person?.display} is now being served`),
+        kind: 'success',
+        timeoutInMs: 3000,
+      });
+
+      mutate();
+    } catch (error) {
+      console.error('Error completing service:', error);
+
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: t('completeServiceError', 'Failed to complete service. 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: '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'),
+      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, getTableContainerProps }) => (
+          <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 === '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 patientUuid = row.cells.find((c) => c.info.header === 'patientUuid')?.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('recordVitals', 'Record Vitals...')
+                                    : t('recordVitals', 'Record Vitals')}
+                                </Button>
+                              )}
+                              {/* {isInService && (
+                                <Button
+                                  kind="tertiary"
+                                  size="sm"
+                                  renderIcon={CheckmarkFilled}
+                                  onClick={() => handleCompleteService(entry)}
+                                  disabled={isProcessing}>
+                                  {isProcessing ? t('completing', 'Completing...') : t('complete', 'Complete')}
+                                </Button>
+                              )} */}
+                              <Button
+                                kind="secondary"
+                                size="sm"
+                                renderIcon={Activity}
+                                onClick={() => handleViewPastVitals(patientUuid)}
+                                disabled={isProcessing}>
+                                {isProcessing ? t('pastVitals', 'Past Vitals...') : t('pastVitals', 'Past Vitals')}
+                              </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))';
+
+  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,
+    }),
+  });
+};