@kenyaemr/esm-service-queues-app 7.0.2-pre.65

package/src/types/index.ts

@@ -0,0 +1,494 @@
+import { type Visit, type OpenmrsResource, type Location, type Patient } from '@openmrs/esm-framework';
+import type React from 'react';
+import { type ColumnConfig } from '../config-schema';
+
+export enum SearchTypes {
+  BASIC = 'basic',
+  ADVANCED = 'advanced',
+  SEARCH_RESULTS = 'search_results',
+  SCHEDULED_VISITS = 'scheduled-visits',
+  VISIT_FORM = 'visit_form',
+}
+
+export interface Attribute {
+  attributeType: OpenmrsResource;
+  display: string;
+  uuid: string;
+  value: string | number;
+}
+
+export interface AppointmentsFetchResponse {
+  data: Array<Appointment>;
+}
+
+export interface Appointment {
+  appointmentKind: string;
+  appointmentNumber: string;
+  comments: string;
+  endDateTime: Date | number;
+  location: OpenmrsResource;
+  patient: {
+    uuid: string;
+    name: string;
+    identifier: string;
+    gender: string;
+    age: string;
+    phoneNumber: string;
+  };
+  provider: OpenmrsResource;
+  providers: Array<OpenmrsResource>;
+  // recurring: boolean;
+  service: AppointmentService;
+  startDateTime: number | any;
+  status: string;
+  uuid: string;
+}
+
+export interface ServiceTypes {
+  duration: number;
+  name: string;
+  uuid: string;
+}
+
+export interface AppointmentService {
+  appointmentServiceId: number;
+  color: string;
+  creatorName: string;
+  description: string;
+  durationMins: string;
+  endTime: string;
+  initialAppointmentStatus: string;
+  location: OpenmrsResource;
+  maxAppointmentsLimit: number | null;
+  name: string;
+  speciality: OpenmrsResource;
+  startTime: string;
+  uuid: string;
+  serviceTypes: Array<ServiceTypes>;
+}
+
+export interface Note {
+  concept: OpenmrsResource;
+  note: string;
+  provider: {
+    name: string;
+    role: string;
+  };
+  time: string;
+}
+
+export interface Order {
+  uuid: string;
+  dateActivated: string;
+  dateStopped?: Date | null;
+  dose: number;
+  dosingInstructions: string | null;
+  dosingType?: 'org.openmrs.FreeTextDosingInstructions' | 'org.openmrs.SimpleDosingInstructions';
+  doseUnits: {
+    uuid: string;
+    display: string;
+  };
+  drug: {
+    uuid: string;
+    name: string;
+    strength: string;
+  };
+  duration: number;
+  durationUnits: {
+    uuid: string;
+    display: string;
+  };
+  frequency: {
+    uuid: string;
+    display: string;
+  };
+  numRefills: number;
+  orderNumber: string;
+  orderReason: string | null;
+  orderReasonNonCoded: string | null;
+  orderer: {
+    uuid: string;
+    person: {
+      uuid: string;
+      display: string;
+    };
+  };
+  orderType: {
+    uuid: string;
+    display: string;
+  };
+  route: {
+    uuid: string;
+    display: string;
+  };
+  quantity: number;
+  quantityUnits: OpenmrsResource;
+}
+
+export interface OrderItem {
+  order: Order;
+  provider: {
+    name: string;
+    role: string;
+  };
+  time: string;
+}
+
+export interface DiagnosisItem {
+  diagnosis: string;
+}
+
+export interface Encounter {
+  uuid: string;
+  encounterDatetime: string;
+  encounterProviders: Array<{
+    uuid: string;
+    display: string;
+    encounterRole: {
+      uuid: string;
+      display: string;
+    };
+    provider: {
+      uuid: string;
+      person: {
+        uuid: string;
+        display: string;
+      };
+    };
+  }>;
+  encounterType: {
+    uuid: string;
+    display: string;
+  };
+  obs: Array<Observation>;
+  form: OpenmrsResource;
+  patient: OpenmrsResource;
+  orders: Array<Order>;
+}
+
+export interface Observation {
+  uuid: string;
+  concept: {
+    uuid: string;
+    display: string;
+    conceptClass: {
+      uuid: string;
+      display: string;
+    };
+  };
+  display: string;
+  groupMembers: null | Array<{
+    uuid: string;
+    concept: {
+      uuid: string;
+      display: string;
+    };
+    value: {
+      uuid: string;
+      display: string;
+    };
+  }>;
+  value: any;
+  obsDatetime: string;
+}
+
+export interface PatientVitals {
+  systolic?: number;
+  diastolic?: number;
+  pulse?: number;
+  temperature?: number;
+  oxygenSaturation?: number;
+  height?: number;
+  weight?: number;
+  bmi?: number | null;
+  respiratoryRate?: number;
+  muac?: number;
+  provider?: {
+    name: string;
+    role: string;
+  };
+  time?: string;
+}
+
+export interface MappedEncounter {
+  id: string;
+  datetime: string;
+  encounterType: string;
+  form: OpenmrsResource;
+  obs: Array<Observation>;
+  provider: string;
+  visitUuid?: string;
+}
+
+export interface FormattedEncounter {
+  id: string;
+  datetime: string;
+  encounterType: string;
+  form: OpenmrsResource;
+  obs: Array<Observation>;
+  provider: string;
+}
+
+export interface ObsMetaInfo {
+  [_: string]: any;
+
+  assessValue?: (value: number) => OBSERVATION_INTERPRETATION;
+}
+
+export type OBSERVATION_INTERPRETATION =
+  | 'NORMAL'
+  | 'HIGH'
+  | 'CRITICALLY_HIGH'
+  | 'OFF_SCALE_HIGH'
+  | 'LOW'
+  | 'CRITICALLY_LOW'
+  | 'OFF_SCALE_LOW'
+  | '--';
+
+export interface PatientProgram {
+  uuid: string;
+  display: string;
+  patient: OpenmrsResource;
+  program: OpenmrsResource;
+  dateEnrolled: string;
+  dateCompleted: string;
+  location: OpenmrsResource;
+}
+
+export interface AppointmentCountMap {
+  allAppointmentsCount: number;
+  missedAppointmentsCount;
+  appointmentDate: number;
+  appointmentServiceUuid: string;
+}
+
+export interface AppointmentSummary {
+  appointmentService: { name: string };
+  appointmentCountMap: Record<string, AppointmentCountMap>;
+}
+
+export interface QueueEntryPayload {
+  visit: { uuid: string };
+  queueEntry: {
+    status: { uuid: string };
+    priority: { uuid: string };
+    queue: { uuid: string };
+    patient: { uuid: string };
+    startedAt: Date;
+    sortWeight: number;
+  };
+}
+
+export type AllowedPriority = OpenmrsResource;
+export type AllowedStatus = OpenmrsResource;
+
+// TODO: remove this in favor of Queue
+export interface QueueServiceInfo {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  allowedPriorities: Array<AllowedPriority>;
+  allowedStatuses: Array<AllowedStatus>;
+}
+
+export interface MappedServiceQueueEntry {
+  id: string;
+  name: string;
+  age: string;
+  gender: string;
+  visitType: string;
+  returnDate: string;
+  patientUuid: string;
+}
+
+export enum FilterTypes {
+  SHOW,
+  HIDE,
+}
+
+export interface Provider {
+  uuid: string;
+  display: string;
+  comments: string;
+  response?: string;
+  person: OpenmrsResource;
+  location: string;
+  serviceType: string;
+}
+
+export interface MappedQueueEntry {
+  id: string;
+  name: string;
+  patientAge: string;
+  patientSex: string;
+  patientDob: string;
+  patientUuid: string;
+  queue: Queue;
+  priority: Concept;
+  priorityComment: string;
+  status: Concept;
+  visitType: string;
+  visitUuid: string;
+  waitTime: string;
+  queueEntryUuid: string;
+  queueLocation: string;
+  sortWeight: string;
+}
+
+export interface EndVisitPayload {
+  location: string;
+  startDatetime: Date;
+  visitType: string;
+  stopDatetime: Date;
+}
+
+export interface LocationResponse {
+  type: string;
+  total: number;
+  resourceType: string;
+  meta: {
+    lastUpdated: string;
+  };
+  link: Array<{
+    relation: string;
+    url: string;
+  }>;
+  id: string;
+  entry: Array<LocationEntry>;
+}
+
+export interface LocationEntry {
+  resource: Resource;
+}
+
+export interface Resource {
+  id: string;
+  name: string;
+  resourceType: string;
+  status: 'active' | 'inactive';
+  meta?: {
+    tag?: Array<{
+      code: string;
+      display: string;
+      system: string;
+    }>;
+  };
+}
+
+export interface Identifer {
+  identifier: string;
+  display: string;
+  uuid: string;
+  identifierType: {
+    uuid: string;
+    display: string;
+  };
+}
+
+export interface NewVisitPayload {
+  uuid?: string;
+  location: string;
+  patient?: string;
+  startDatetime: Date;
+  visitType: string;
+  stopDatetime?: Date;
+  attributes?: Array<{
+    attributeType: string;
+    value: string;
+  }>;
+}
+
+export interface QueueRoom {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+}
+
+export interface ProvidersQueueRoom {
+  uuid: string;
+  provider: {
+    uuid: string;
+    display: string;
+  };
+  queueRoom: {
+    uuid: string;
+    name: string;
+    display: string;
+  };
+}
+
+export interface WaitTime {
+  metric: string;
+  averageWaitTime: string;
+}
+
+export interface QueueTableCellComponentProps {
+  queueEntry: QueueEntry;
+}
+
+export type QueueTableColumn = {
+  key: string; // key used by DataTable, MUST be unique for each column in the queue table
+  header: string; // header of the column
+  CellComponent: React.FC<QueueTableCellComponentProps>;
+
+  // function to extract from the queue entry a searchable string representing the its value within this column.
+  // May be null to make this column's content unsearchable
+  getFilterableValue: (queueEntry: QueueEntry) => string | null;
+};
+
+export type QueueTableColumnFunction = (
+  key: string, // a unique key for the column
+  header?: string,
+  config?: ColumnConfig,
+) => QueueTableColumn;
+
+export interface QueueTableTabConfig {
+  columns: QueueTableColumn[];
+  tabNameI18nKey?: string;
+}
+
+export interface Queue {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  location: Location;
+  service: Concept;
+  allowedPriorities: Array<Concept>;
+  allowedStatuses: Array<Concept>;
+}
+
+export interface QueueEntry {
+  uuid: string;
+  display: string;
+  endedAt: string;
+  locationWaitingFor: Location;
+  patient: Patient;
+  priority: Concept;
+  priorityComment: string | null;
+  providerWaitingFor: Provider;
+  queue: Queue;
+  startedAt: string;
+  status: Concept;
+  visit: Visit;
+  sortWeight: number;
+  queueComingFrom: Queue;
+  previousQueueEntry: QueueEntry;
+}
+
+export interface QueueEntrySearchCriteria {
+  queue?: Array<string> | string;
+  location?: Array<string> | string;
+  service?: Array<string> | string;
+  status?: Array<string> | string;
+  isEnded: boolean;
+}
+
+// TODO: The follow types match the types from backend.
+// They should be common enough to move to esm-core
+
+export interface Concept extends OpenmrsResource {}
+
+export interface Provider extends OpenmrsResource {}

package/src/views/queue-table-by-status-view.component.tsx

@@ -0,0 +1,25 @@
+import { InlineNotification } from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import { useQueue } from '../hooks/useQueue';
+import QueueTableByStatus from '../queue-table/queue-table-by-status.component';
+import { QueueTableByStatusSkeleton } from '../queue-table/queue-table-by-status-skeleton.component';
+import QueueTablesForAllStatuses from './queue-tables-for-all-statuses.component';
+
+const QueueTableByStatusView: React.FC = () => {
+  const { queueUuid, statusUuid } = useParams();
+  const { queue, isLoading } = useQueue(queueUuid);
+  const status = queue?.allowedStatuses.find((s) => s.uuid == statusUuid);
+  const { t } = useTranslation();
+
+  if (isLoading) {
+    return <QueueTableByStatusSkeleton />;
+  } else if (!queue) {
+    return <InlineNotification kind="error" title={t('invalidQueue', 'Invalid Queue')} />;
+  } else {
+    return <QueueTablesForAllStatuses selectedQueue={queue} />;
+  }
+};
+
+export default QueueTableByStatusView;

package/src/views/queue-tables-for-all-statuses.component.tsx

@@ -0,0 +1,150 @@
+import React, { useCallback, useState } from 'react';
+import { InlineNotification, Search } from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import { ExtensionSlot, isDesktop, launchWorkspace, showToast, useLayoutType } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { useQueueEntries } from '../hooks/useQueueEntries';
+import { useColumns } from '../queue-table/cells/columns.resource';
+import { QueueTableByStatusSkeleton } from '../queue-table/queue-table-by-status-skeleton.component';
+import QueueTable from '../queue-table/queue-table.component';
+import QueueTableMetrics from '../queue-table/queue-table-metrics.component';
+import styles from '../queue-table/queue-table.scss';
+import type { Concept, Queue, QueueEntry } from '../types';
+
+interface QueueTablesForAllStatusesProps {
+  selectedQueue: Queue; // the selected queue
+}
+
+// displays the queue entries of a given queue by
+// showing one table per status
+const QueueTablesForAllStatuses: React.FC<QueueTablesForAllStatusesProps> = ({ selectedQueue }) => {
+  const layout = useLayoutType();
+  const { t } = useTranslation();
+
+  const { queueEntries, isLoading, isValidating } = useQueueEntries({ queue: selectedQueue.uuid, isEnded: false });
+  const allowedStatuses = selectedQueue.allowedStatuses;
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const noStatuses = !allowedStatuses?.length;
+  if (isLoading && !queueEntries.length) {
+    return <QueueTableByStatusSkeleton />;
+  } else if (noStatuses) {
+    return (
+      <InlineNotification
+        kind={'error'}
+        lowContrast
+        subtitle={t('configureStatus', 'Please configure status to continue.')}
+        title={t('noStatusConfigured', 'No status configured')}
+      />
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.headerContainer}>
+        <div className={isDesktop(layout) ? styles.desktopHeading : styles.tabletHeading}>
+          <h3>{selectedQueue.display}</h3>
+        </div>
+        <div>
+          <QueueTableMetrics selectedQueue={selectedQueue} />
+        </div>
+        <div className={styles.headerButtons}>
+          <ExtensionSlot
+            name="patient-search-button-slot"
+            state={{
+              buttonText: t('addPatientToQueue', 'Add patient to queue'),
+              overlayHeader: t('addPatientToQueue', 'Add patient to queue'),
+              buttonProps: {
+                kind: 'secondary',
+                renderIcon: (props) => <Add size={16} {...props} />,
+                size: 'sm',
+              },
+              selectPatientAction: (selectedPatientUuid) => {
+                launchWorkspace('service-queues-patient-search', {
+                  selectedPatientUuid,
+                  currentServiceQueueUuid: selectedQueue.uuid,
+                });
+              },
+            }}
+          />
+          <Search
+            labelText=""
+            placeholder={t('filterTable', 'Filter table')}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            size={isDesktop(layout) ? 'sm' : 'lg'}
+          />
+        </div>
+      </div>
+      {allowedStatuses?.map((status) => (
+        <QueueTableForQueueAndStatus
+          key={status.uuid}
+          queueEntries={queueEntries}
+          searchTerm={searchTerm}
+          queue={selectedQueue}
+          status={status}
+          isValidating={isValidating}
+        />
+      ))}
+    </div>
+  );
+};
+
+interface QueueTableForQueueAndStatus {
+  queueEntries: QueueEntry[];
+  isValidating: boolean;
+  searchTerm: string;
+  queue: Queue;
+  status: Concept;
+}
+
+// renders a table for a particular queue and status within the QueueTablesForAllStatuses view
+function QueueTableForQueueAndStatus({
+  queueEntries,
+  isValidating,
+  searchTerm,
+  queue,
+  status,
+}: QueueTableForQueueAndStatus) {
+  const statusUuid = status.uuid;
+  const columns = useColumns(queue.uuid, statusUuid);
+  const { t } = useTranslation();
+
+  if (!columns) {
+    showToast({
+      title: t('invalidtableConfig', 'Invalid table configuration'),
+      kind: 'warning',
+      description: 'No table columns defined by queue ' + queue.uuid + ' and status ' + statusUuid,
+    });
+  }
+
+  // filters queue entries based on which status table we want to show and search term inputted by user
+  const filterQueueEntries = useCallback(
+    (queueEntries: QueueEntry[], searchTerm: string, statucUuid: string) => {
+      const searchTermLowercase = searchTerm.toLowerCase();
+      return queueEntries.filter((queueEntry) => {
+        const match = columns.some((column) => {
+          const columnSearchTerm = column.getFilterableValue?.(queueEntry)?.toLocaleLowerCase();
+          return columnSearchTerm?.includes(searchTermLowercase);
+        });
+        return queueEntry.status.uuid == statucUuid && match;
+      });
+    },
+    [queueEntries, searchTerm, columns],
+  );
+
+  const filteredQueueEntries = filterQueueEntries(queueEntries, searchTerm, statusUuid);
+  return (
+    <div className={styles.statusTableContainer}>
+      <QueueTable
+        key={statusUuid}
+        queueEntries={filteredQueueEntries}
+        header={status.display}
+        isValidating={isValidating}
+        queueUuid={queue.uuid}
+        statusUuid={statusUuid}
+      />
+    </div>
+  );
+}
+
+export default QueueTablesForAllStatuses;