@openmrs/esm-service-queues-app 5.0.1-pre.2087

package/src/types/index.ts

@@ -0,0 +1,434 @@
+import { OpenmrsResource } from '@openmrs/esm-framework';
+
+export enum SearchTypes {
+  BASIC = 'basic',
+  ADVANCED = 'advanced',
+  SEARCH_RESULTS = 'search_results',
+  SCHEDULED_VISITS = 'scheduled-visits',
+  VISIT_FORM = 'visit_form',
+  QUEUE_SERVICE_FORM = 'queue_service_form',
+  QUEUE_ROOM_FORM = 'queue_room_form',
+}
+
+export interface Patient {
+  uuid: string;
+  display: string;
+  identifiers: Array<any>;
+  person: Person;
+}
+
+export interface Attribute {
+  attributeType: OpenmrsResource;
+  display: string;
+  uuid: string;
+  value: string | number;
+}
+
+export interface Person {
+  age: number;
+  attributes: Array<Attribute>;
+  birthDate: string;
+  gender: string;
+  display: string;
+  preferredAddress: OpenmrsResource;
+  uuid: string;
+}
+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 interface QueueServiceInfo {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+}
+
+export interface MappedServiceQueueEntry {
+  id: string;
+  name: string;
+  age: string;
+  gender: string;
+  phoneNumber: 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;
+  priority: string;
+  priorityComment: string;
+  priorityUuid: string;
+  service: string;
+  status: string;
+  statusUuid: string;
+  visitStartDateTime: string;
+  visitType: string;
+  visitUuid: string;
+  waitTime: string;
+  queueUuid: 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;
+}

package/src/visits-missing-inqueue/visits-missing-inqueue.component.tsx

@@ -0,0 +1,298 @@
+import React, { useMemo, useEffect, useState, useCallback, MouseEvent, AnchorHTMLAttributes } from 'react';
+import {
+  DataTable,
+  DataTableSkeleton,
+  InlineLoading,
+  Layer,
+  Pagination,
+  Search,
+  Table,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  TableToolbar,
+  TableToolbarContent,
+  TableExpandRow,
+  TableExpandHeader,
+  TableExpandedRow,
+  Tile,
+  Button,
+} from '@carbon/react';
+import {
+  useLayoutType,
+  isDesktop,
+  useConfig,
+  usePagination,
+  ExtensionSlot,
+  formatDatetime,
+  parseDate,
+  interpolateUrl,
+  navigate,
+  showModal,
+} from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import styles from './visits-missing-inqueue.scss';
+import { getOriginFromPathName } from '../active-visits/active-visits-table.resource';
+import { ActiveVisit, useMissingQueueEntries } from './visits-missing-inqueue.resource';
+import { Add } from '@carbon/react/icons';
+
+interface PaginationData {
+  goTo: (page: number) => void;
+  results: Array<ActiveVisit>;
+  currentPage: number;
+}
+interface NameLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  to: string;
+  from: string;
+}
+
+const PatientNameLink: React.FC<NameLinkProps> = ({ from, to, children }) => {
+  const handleNameClick = (event: MouseEvent, to: string) => {
+    event.preventDefault();
+    navigate({ to });
+    localStorage.setItem('fromPage', from);
+  };
+  return (
+    <a onClick={(e) => handleNameClick(e, to)} href={interpolateUrl(to)}>
+      {children}
+    </a>
+  );
+};
+
+function AddMenu({ visitDetails }: { visitDetails: ActiveVisit }) {
+  const { t } = useTranslation();
+  const launchAddVisitToQueueModal = useCallback(() => {
+    const dispose = showModal('add-visit-to-queue-modal', {
+      closeModal: () => dispose(),
+      visitDetails,
+    });
+  }, [visitDetails]);
+
+  return (
+    <Button
+      kind="ghost"
+      onClick={launchAddVisitToQueueModal}
+      iconDescription={t('addisitToQueueTooltip', 'Add to queue')}
+      renderIcon={(props) => <Add size={16} {...props} />}>
+      {t('addToQueue', 'Add to queue')}
+    </Button>
+  );
+}
+
+const MissingQueueEntries = () => {
+  const { t } = useTranslation();
+  const config = useConfig();
+  const layout = useLayoutType();
+  const { activeVisits, isLoading, visitsIsValidating } = useMissingQueueEntries();
+  const pageSizes = config?.activeVisits?.pageSizes ?? [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(config?.activeVisits?.pageSize ?? 10);
+  const [searchString, setSearchString] = useState('');
+
+  const currentPathName = window.location.pathname;
+  const fromPage = getOriginFromPathName(currentPathName);
+
+  const headerData = useMemo(
+    () => [
+      {
+        id: 0,
+        header: t('visitStartTime', 'Visit Time'),
+        key: 'visitStartTime',
+      },
+      {
+        id: 1,
+        header: t('idNumber', 'ID Number'),
+        key: 'idNumber',
+      },
+      {
+        id: 2,
+        header: t('name', 'Name'),
+        key: 'name',
+      },
+      {
+        id: 3,
+        header: t('gender', 'Gender'),
+        key: 'gender',
+      },
+      {
+        id: 4,
+        header: t('age', 'Age'),
+        key: 'age',
+      },
+      {
+        id: 5,
+        header: t('visitType', 'Visit Type'),
+        key: 'visitType',
+      },
+    ],
+    [t],
+  );
+
+  const rowData = activeVisits.map((visit) => ({
+    ...visit,
+    visitStartTime: formatDatetime(parseDate(visit.visitStartTime)),
+  }));
+
+  const searchResults = useMemo(() => {
+    if (searchString && searchString.trim() !== '') {
+      const search = searchString.toLowerCase();
+      return rowData.filter((activeVisitRow) =>
+        Object.keys(activeVisitRow).some((header) => {
+          if (header === 'patientUuid') {
+            return false;
+          }
+          return `${activeVisitRow[header]}`.toLowerCase().includes(search);
+        }),
+      );
+    } else {
+      return rowData;
+    }
+  }, [searchString, rowData]);
+
+  const {
+    goTo,
+    results: paginatedActiveVisits,
+    currentPage,
+  }: PaginationData = usePagination(searchResults, currentPageSize);
+
+  const handleSearch = useCallback((e) => setSearchString(e.target.value), []);
+
+  useEffect(() => {
+    if (currentPage !== 1) {
+      goTo(1);
+    }
+  }, [searchString, currentPage, goTo]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+  if (activeVisits?.length) {
+    return (
+      <div className={styles.activeVisitsContainer}>
+        <div className={styles.activeVisitsDetailHeaderContainer}>
+          <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
+            <h4>{t('activeVisitsNotInQueue', 'Active visits not in queue')}</h4>
+          </div>
+          <div className={styles.backgroundDataFetchingIndicator}>
+            <span>{visitsIsValidating ? <InlineLoading /> : null}</span>
+          </div>
+        </div>
+        <DataTable
+          rows={paginatedActiveVisits}
+          headers={headerData}
+          size={isDesktop(layout) ? 'xs' : 'md'}
+          useZebraStyles={activeVisits?.length > 1 ? true : false}>
+          {({ rows, headers, getHeaderProps, getTableProps, getBatchActionProps, getRowProps }) => (
+            <TableContainer className={styles.tableContainer}>
+              <TableToolbar>
+                <TableToolbarContent>
+                  <Search
+                    tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
+                    labelText=""
+                    placeholder={t('filterTable', 'Filter table')}
+                    onChange={handleSearch}
+                  />
+                </TableToolbarContent>
+              </TableToolbar>
+              <Table className={styles.activeVisitsTable} {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    <TableExpandHeader />
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row, index) => (
+                    <React.Fragment key={index}>
+                      <TableExpandRow {...getRowProps({ row })}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>
+                            {cell.info.header === 'name' ? (
+                              <PatientNameLink
+                                from={fromPage}
+                                to={`\${openmrsSpaBase}/patient/${paginatedActiveVisits?.[index]?.patientUuid}/chart/`}>
+                                {cell.value}
+                              </PatientNameLink>
+                            ) : (
+                              cell.value
+                            )}
+                          </TableCell>
+                        ))}
+                        <TableCell className="cds--table-column-menu">
+                          <AddMenu visitDetails={paginatedActiveVisits?.[index]} />
+                        </TableCell>
+                      </TableExpandRow>
+                      {row.isExpanded ? (
+                        <TableRow className={styles.expandedActiveVisitRow}>
+                          <th colSpan={headers.length + 2}>
+                            <ExtensionSlot
+                              className={styles.visitSummaryContainer}
+                              name="visit-summary-slot"
+                              state={{
+                                visitUuid: paginatedActiveVisits[index]?.visitUuid,
+                                patientUuid: paginatedActiveVisits[index]?.patientUuid,
+                              }}
+                            />
+                          </th>
+                        </TableRow>
+                      ) : (
+                        <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                      )}
+                    </React.Fragment>
+                  ))}
+                </TableBody>
+              </Table>
+              {rows.length === 0 && (
+                <p
+                  style={{
+                    height: isDesktop(layout) ? '2rem' : '3rem',
+                    margin: '1rem 1.5rem',
+                  }}
+                  className={`${styles.emptyRow} ${styles.bodyLong01}`}>
+                  {t('noVisitsNotInQueueFound', 'No visits currently not in queue found')}
+                </p>
+              )}
+              <Pagination
+                forwardText="Next page"
+                backwardText="Previous page"
+                page={currentPage}
+                pageSize={currentPageSize}
+                pageSizes={pageSizes}
+                totalItems={searchResults.length}
+                className={styles.pagination}
+                onChange={({ pageSize, page }) => {
+                  if (pageSize !== currentPageSize) {
+                    setPageSize(pageSize);
+                  }
+                  if (page !== currentPage) {
+                    goTo(page);
+                  }
+                }}
+              />
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    );
+  }
+  return (
+    <div className={styles.activeVisitsContainer}>
+      <Layer>
+        <Tile className={styles.tile}>
+          <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
+            <h4>{t('activeVisits', 'Active Visits')}</h4>
+          </div>
+          <p className={styles.content}>
+            {t('noActiveVisitsForLocation', 'There are no active visits to display for this location.')}
+          </p>
+        </Tile>
+      </Layer>
+    </div>
+  );
+};
+
+export default MissingQueueEntries;