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

package/src/queue-services/queue-service-form.workspace.tsx

@@ -0,0 +1,179 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Column,
+  Form,
+  Layer,
+  Stack,
+  TextInput,
+  Select,
+  SelectItem,
+  ButtonSet,
+  Button,
+  InlineNotification,
+} from '@carbon/react';
+import { mutate } from 'swr';
+import { type DefaultWorkspaceProps, restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import { saveQueue, useServiceConcepts } from './queue-service.resource';
+import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import styles from './queue-service-form.scss';
+
+const QueueServiceForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace }) => {
+  const { t } = useTranslation();
+  const { queueConcepts } = useServiceConcepts();
+  const [queueName, setQueueName] = useState('');
+  const [queueConcept, setQueueConcept] = useState('');
+  const [isMissingName, setMissingName] = useState(false);
+  const [isMissingQueue, setMissingQueue] = useState(false);
+  const [isMissingLocation, setMissingLocation] = useState(false);
+  const [userLocation, setUserLocation] = useState('');
+  const { queueLocations } = useQueueLocations();
+
+  const createQueue = useCallback(
+    (event) => {
+      event.preventDefault();
+
+      if (!queueName) {
+        setMissingName(true);
+        return;
+      }
+      if (!queueConcept) {
+        setMissingQueue(true);
+        return;
+      }
+      if (!userLocation) {
+        setMissingLocation(true);
+        return;
+      }
+
+      setMissingName(false);
+      setMissingQueue(false);
+      setMissingLocation(false);
+
+      saveQueue(queueName, queueConcept, queueName, userLocation).then(
+        ({ status }) => {
+          if (status === 201) {
+            showSnackbar({
+              title: t('addQueue', 'Add queue'),
+              kind: 'success',
+              subtitle: t('queueAddedSuccessfully', 'Queue added successfully'),
+            });
+            closeWorkspace();
+            mutate(`${restBaseUrl}/queue?${userLocation}`);
+            mutate(`${restBaseUrl}/queue?location=${userLocation}`);
+          }
+        },
+        (error) => {
+          showSnackbar({
+            title: t('errorAddingQueue', 'Error adding queue'),
+            kind: 'error',
+            isLowContrast: false,
+            subtitle: error?.message,
+          });
+        },
+      );
+    },
+    [queueName, queueConcept, userLocation, t, closeWorkspace],
+  );
+
+  return (
+    <Form onSubmit={createQueue} className={styles.form}>
+      <Stack gap={4} className={styles.grid}>
+        <Column>
+          <Layer className={styles.input}>
+            <TextInput
+              id="queueName"
+              invalidText="Required"
+              labelText={t('queueName', 'Queue name')}
+              onChange={(event) => setQueueName(event.target.value)}
+              value={queueName}
+            />
+            {isMissingName && (
+              <section>
+                <InlineNotification
+                  style={{ margin: '0', minWidth: '100%' }}
+                  kind="error"
+                  lowContrast={true}
+                  title={t('missingQueueName', 'Missing queue name')}
+                  subtitle={t('addQueueName', 'Please add a queue name')}
+                />
+              </section>
+            )}
+          </Layer>
+        </Column>
+
+        <Column>
+          <Layer className={styles.input}>
+            <Select
+              labelText={t('selectServiceType', 'Select a service type')}
+              id="queueConcept"
+              invalidText="Required"
+              value={queueConcept}
+              onChange={(event) => setQueueConcept(event.target.value)}>
+              {!queueConcept && <SelectItem text={t('selectServiceType', 'Select a service type')} />}
+              {queueConcepts.length === 0 && <SelectItem text={t('noServicesAvailable', 'No services available')} />}
+              {queueConcepts?.length > 0 &&
+                queueConcepts.map((concept) => (
+                  <SelectItem key={concept.uuid} text={concept.display} value={concept.uuid}>
+                    {concept.display}
+                  </SelectItem>
+                ))}
+            </Select>
+            {isMissingQueue && (
+              <section>
+                <InlineNotification
+                  style={{ margin: '0', minWidth: '100%' }}
+                  kind="error"
+                  lowContrast={true}
+                  title={t('missingService', 'Missing service')}
+                  subtitle={t('selectServiceType', 'Select a service type')}
+                />
+              </section>
+            )}
+          </Layer>
+        </Column>
+
+        <Column>
+          <Layer className={styles.input}>
+            <Select
+              labelText={t('selectALocation', 'Select a location')}
+              id="location"
+              invalidText="Required"
+              value={userLocation}
+              onChange={(event) => setUserLocation(event.target.value)}>
+              {!userLocation && <SelectItem text={t('selectALocation', 'Select a location')} />}
+              {queueLocations.length === 0 && <SelectItem text={t('noLocationsAvailable', 'No locations available')} />}
+              {queueLocations?.length > 0 &&
+                queueLocations.map((location) => (
+                  <SelectItem key={location.id} text={location.name} value={location.id}>
+                    {location.name}
+                  </SelectItem>
+                ))}
+            </Select>
+            {isMissingLocation && (
+              <section>
+                <InlineNotification
+                  style={{ margin: '0', minWidth: '100%' }}
+                  kind="error"
+                  lowContrast={true}
+                  title={t('missingLocation', 'Missing location')}
+                  subtitle={t('pleaseSelectLocation', 'Please select a location')}
+                />
+              </section>
+            )}
+          </Layer>
+        </Column>
+      </Stack>
+      <ButtonSet className={styles.buttonSet}>
+        <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button className={styles.button} kind="primary" type="submit">
+          {t('save', 'Save')}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default QueueServiceForm;

package/src/queue-services/queue-service.resource.ts

@@ -0,0 +1,33 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { useSystemSetting } from '../hooks/useSystemSetting';
+import { useConcept } from '../hooks/useConcept';
+
+export function useServiceConcepts() {
+  const { systemSetting: serviceConceptSetting } = useSystemSetting('queue.serviceConceptSetName');
+  const { concept: serviceConceptSet, error, isLoading } = useConcept(serviceConceptSetting?.value);
+  return {
+    queueConcepts: serviceConceptSet?.setMembers?.sort((c1, c2) => c1.display.localeCompare(c2.display)) || [],
+    error,
+    isLoading,
+  };
+}
+
+export function saveQueue(queueName: string, queueConcept: string, queueDescription: string, queueLocation: string) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`${restBaseUrl}/queue`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: {
+      name: queueName,
+      description: queueDescription,
+      service: { uuid: queueConcept },
+      location: {
+        uuid: queueLocation,
+      },
+    },
+  });
+}

package/src/queue-table/cells/columns.resource.ts

@@ -0,0 +1,135 @@
+import { showToast, translateFrom, useConfig } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import { useTranslation, type TFunction } from 'react-i18next';
+import {
+  builtInColumns,
+  defaultColumnConfig,
+  defaultQueueTable,
+  type ColumnDefinition,
+  type ConfigObject,
+} from '../../config-schema';
+import { type QueueTableColumn } from '../../types';
+import { queueTableComingFromColumn } from './queue-table-coming-from-cell.component';
+import { queueTableExtensionColumn } from './queue-table-extension-cell.component';
+import { queueTableNameColumn } from './queue-table-name-cell.component';
+import { queueTablePatientAgeColumn } from './queue-table-patient-age-cell.component';
+import { queueTablePatientIdentifierColumn } from './queue-table-patient-identifier-cell.component';
+import { queueTablePriorityColumn } from './queue-table-priority-cell.component';
+import { queueTableQueueNameColumn } from './queue-table-queue-name-cell.component';
+import { queueTableStatusColumn } from './queue-table-status-cell.component';
+import { queueTableVisitAttributeQueueNumberColumn } from './queue-table-visit-attribute-queue-number-cell.component';
+import { queueTableVisitStartTimeColumn } from './queue-table-visit-start-time-cell.component';
+import { queueTableWaitTimeColumn } from './queue-table-wait-time-cell.component';
+import { queueTableActionColumn } from './queue-table-action-cell.component';
+
+// returns the columns to display for a queue table of a particular queue + status.
+// For a table displaying all entries of a particular queue, the status param should be null
+// For a table displaying all entries from all queues, both params should be null
+export function useColumns(queue: string, status: string): QueueTableColumn[] {
+  const { t } = useTranslation();
+  const config = useConfig<ConfigObject>();
+  const { queueTables, visitQueueNumberAttributeUuid } = config;
+  const { columnDefinitions } = queueTables;
+  const tableDefinitions = [...queueTables.tableDefinitions, defaultQueueTable];
+  const globalColumnConfig = {
+    ...defaultColumnConfig,
+    visitQueueNumberAttributeUuid,
+  };
+
+  const columnsMap = useMemo(() => {
+    const map = new Map<string, QueueTableColumn>();
+    for (const column of builtInColumns) {
+      map.set(column, getColumnFromDefinition(t, { id: column, config: globalColumnConfig }));
+    }
+    for (const columnDef of columnDefinitions) {
+      if (columnDef.columnType == 'queue-number' || columnDef.id == 'queue-number') {
+        columnDef.config.visitQueueNumberAttributeUuid =
+          columnDef.config.visitQueueNumberAttributeUuid ?? visitQueueNumberAttributeUuid;
+      }
+      map.set(columnDef.id, getColumnFromDefinition(t, columnDef));
+    }
+    return map;
+  }, [columnDefinitions, t]);
+
+  const tableDefinition = useMemo(
+    () =>
+      tableDefinitions.find((tableDef) => {
+        const appliedTo = tableDef.appliedTo;
+
+        return (
+          appliedTo == null ||
+          appliedTo.some(
+            (criteria) =>
+              (criteria.queue == null || criteria.queue == queue) &&
+              (criteria.status == null || criteria.status == status),
+          )
+        );
+      }),
+    [tableDefinitions, queue, status],
+  );
+
+  const columns = tableDefinition?.columns?.map((columnId) => {
+    const column = columnsMap.get(columnId);
+    if (!column) {
+      showToast({
+        title: t('invalidColumnConfig', 'Invalid column config'),
+        kind: 'warning',
+        description: 'Unknown column id: ' + columnId,
+      });
+    }
+    return column;
+  });
+  return columns;
+}
+
+function getColumnFromDefinition(t: TFunction, columnDef: ColumnDefinition): QueueTableColumn {
+  const { id, header, headerI18nModule, columnType } = columnDef;
+
+  const translatedHeader = header ? translateFrom(headerI18nModule ?? '@openmrs/esm-service-queues-app', header) : null;
+
+  switch (columnType ?? id) {
+    case 'patient-name': {
+      return queueTableNameColumn(id, translatedHeader ?? t('name', 'Name'));
+    }
+    case 'patient-identifier': {
+      return queueTablePatientIdentifierColumn(id, translatedHeader ?? t('patientId', 'Patient Id'), columnDef.config);
+    }
+    case 'queue-number': {
+      return queueTableVisitAttributeQueueNumberColumn(
+        id,
+        translatedHeader ?? t('queueNumber', 'Queue Number'),
+        columnDef.config,
+      );
+    }
+    case 'patient-age': {
+      return queueTablePatientAgeColumn(id, translatedHeader ?? t('age', 'Age'));
+    }
+    case 'priority': {
+      return queueTablePriorityColumn(id, translatedHeader ?? t('priority', 'Priority'), columnDef.config);
+    }
+    case 'status': {
+      return queueTableStatusColumn(id, translatedHeader ?? t('status', 'Status'), columnDef.config);
+    }
+    case 'coming-from': {
+      return queueTableComingFromColumn(id, translatedHeader ?? t('comingFrom', 'Coming from'));
+    }
+    case 'queue': {
+      return queueTableQueueNameColumn(id, translatedHeader ?? t('queue', 'Queue'));
+    }
+    case 'wait-time': {
+      return queueTableWaitTimeColumn(id, translatedHeader ?? t('waitTime', 'Wait time'));
+    }
+    case 'visit-start-time': {
+      return queueTableVisitStartTimeColumn(id, translatedHeader ?? t('visitStartTime', 'Visit start time'));
+    }
+    case 'actions': {
+      return queueTableActionColumn(id, translatedHeader ?? t('actions', 'Actions'));
+    }
+    case 'extension': {
+      return queueTableExtensionColumn(id, translatedHeader);
+    }
+    default: {
+      throw new Error('Unknown column type from configuration: ' + columnType);
+    }
+  }
+}

package/src/queue-table/cells/queue-table-action-cell.component.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import { showModal } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { type QueueTableColumnFunction, type QueueTableCellComponentProps } from '../../types';
+import styles from './queue-table-action-cell.scss';
+
+export function QueueTableActionCell({ queueEntry }: QueueTableCellComponentProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.actionCellContainer}>
+      <Button
+        kind="ghost"
+        aria-label={t('actions', 'Actions')}
+        onClick={() => {
+          const dispose = showModal('transition-queue-entry-modal', {
+            closeModal: () => dispose(),
+            queueEntry,
+          });
+        }}>
+        {t('transition', 'Transition')}
+      </Button>
+      <OverflowMenu aria-label="Actions menu" size="sm" flipped>
+        <OverflowMenuItem
+          className={styles.menuItem}
+          aria-label={t('edit', 'Edit')}
+          hasDivider
+          onClick={() => {
+            const dispose = showModal('edit-queue-entry-modal', {
+              closeModal: () => dispose(),
+              queueEntry,
+            });
+          }}
+          itemText={t('edit', 'Edit')}
+        />
+        <OverflowMenuItem
+          className={styles.menuItem}
+          aria-label={t('removePatient', 'Remove patient')}
+          hasDivider
+          onClick={() => {
+            const dispose = showModal('end-queue-entry-modal', {
+              closeModal: () => dispose(),
+              queueEntry,
+            });
+          }}
+          itemText={t('removePatient', 'Remove patient')}
+        />
+        {queueEntry.previousQueueEntry == null ? (
+          <OverflowMenuItem
+            className={styles.menuItem}
+            aria-label={t('delete', 'Delete')}
+            hasDivider
+            isDelete
+            onClick={() => {
+              const dispose = showModal('void-queue-entry-modal', {
+                closeModal: () => dispose(),
+                queueEntry,
+              });
+            }}
+            itemText={t('delete', 'Delete')}
+          />
+        ) : (
+          <OverflowMenuItem
+            className={styles.menuItem}
+            aria-label={t('undoTransition', 'Undo transition')}
+            hasDivider
+            isDelete
+            onClick={() => {
+              const dispose = showModal('undo-transition-queue-entry-modal', {
+                closeModal: () => dispose(),
+                queueEntry,
+              });
+            }}
+            itemText={t('undoTransition', 'Undo transition')}
+          />
+        )}
+      </OverflowMenu>
+    </div>
+  );
+}
+
+export const queueTableActionColumn: QueueTableColumnFunction = (key, header) => ({
+  key,
+  header,
+  CellComponent: QueueTableActionCell,
+  getFilterableValue: null,
+});

package/src/queue-table/cells/queue-table-action-cell.scss

@@ -0,0 +1,7 @@
+.actionCellContainer {
+  white-space: nowrap;
+}
+
+.menuItem {
+  max-width: none;
+}

package/src/queue-table/cells/queue-table-coming-from-cell.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type QueueTableColumnFunction, type QueueTableCellComponentProps } from '../../types';
+
+export const QueueTableComingFromCell = ({ queueEntry }: QueueTableCellComponentProps) => {
+  return <>{queueEntry.queueComingFrom?.display}</>;
+};
+
+export const queueTableComingFromColumn: QueueTableColumnFunction = (key, header) => ({
+  key,
+  header,
+  CellComponent: QueueTableComingFromCell,
+  getFilterableValue: (queueEntry) => queueEntry.queueComingFrom?.display,
+});

package/src/queue-table/cells/queue-table-extension-cell.component.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import { type QueueTableColumnFunction, type QueueTableCellComponentProps } from '../../types';
+
+export const queueTableExtensionColumn: QueueTableColumnFunction = (key, header) => {
+  const QueueTableExtensionCell = ({ queueEntry }: QueueTableCellComponentProps) => {
+    return <ExtensionSlot name={`queue-table-${key}-slot`} state={{ queueEntry }} />;
+  };
+
+  return {
+    key,
+    header,
+    CellComponent: QueueTableExtensionCell,
+    getFilterableValue: null,
+  };
+};

package/src/queue-table/cells/queue-table-name-cell.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ConfigurableLink, useConfig } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../../config-schema';
+import { type QueueTableColumnFunction, type QueueTableCellComponentProps } from '../../types';
+
+export const QueueTableNameCell = ({ queueEntry }: QueueTableCellComponentProps) => {
+  const { customPatientChartUrl } = useConfig<ConfigObject>();
+  return (
+    <ConfigurableLink to={customPatientChartUrl} templateParams={{ patientUuid: queueEntry.patient.uuid }}>
+      {queueEntry.patient.person.display}
+    </ConfigurableLink>
+  );
+};
+
+export const queueTableNameColumn: QueueTableColumnFunction = (key, header) => ({
+  key,
+  header,
+  CellComponent: QueueTableNameCell,
+  getFilterableValue: (queueEntry) => queueEntry.patient.person.display,
+});

package/src/queue-table/cells/queue-table-patient-age-cell.component.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import { type QueueTableColumnFunction, type QueueTableCellComponentProps } from '../../types';
+
+export const QueueTablePatientAgeCell = ({ queueEntry }: QueueTableCellComponentProps) => {
+  const birthdate = dayjs(queueEntry.patient.person.birthdate);
+  const todaydate = dayjs();
+  const age = todaydate.diff(birthdate, 'years');
+
+  return <span>{age}</span>;
+};
+
+export const queueTablePatientAgeColumn: QueueTableColumnFunction = (key, header) => ({
+  key,
+  header,
+  CellComponent: QueueTablePatientAgeCell,
+  getFilterableValue: null,
+});

package/src/queue-table/cells/queue-table-patient-identifier-cell.component.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type PatientIdentifierColumnConfig } from '../../config-schema';
+import { type QueueEntry, type QueueTableColumnFunction, type QueueTableCellComponentProps } from '../../types';
+
+export const queueTablePatientIdentifierColumn: QueueTableColumnFunction = (
+  key,
+  header,
+  config: PatientIdentifierColumnConfig,
+) => {
+  const { identifierTypeUuid } = config;
+
+  const getPatientIdentifier = (queueEntry: QueueEntry) =>
+    queueEntry.patient.identifiers.find((i) => i.identifierType?.uuid == identifierTypeUuid)?.identifier;
+
+  const QueueTablePatientIdentifierCell = ({ queueEntry }: QueueTableCellComponentProps) => {
+    return <span>{getPatientIdentifier(queueEntry)}</span>;
+  };
+
+  return {
+    key,
+    header,
+    CellComponent: QueueTablePatientIdentifierCell,
+    getFilterableValue: getPatientIdentifier,
+  };
+};

package/src/queue-table/cells/queue-table-priority-cell.component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import QueuePriority from '../../queue-entry-table-components/queue-priority.component';
+import { type QueueTableColumnFunction, type QueueTableCellComponentProps } from '../../types';
+import { type PriorityColumnConfig } from '../../config-schema';
+
+export const queueTablePriorityColumn: QueueTableColumnFunction = (key, header, config: PriorityColumnConfig) => {
+  const QueueTablePriorityCell = ({ queueEntry }: QueueTableCellComponentProps) => {
+    return (
+      <QueuePriority
+        priority={queueEntry.priority}
+        priorityComment={queueEntry.priorityComment}
+        priorityConfigs={config?.priorityConfigs}
+      />
+    );
+  };
+
+  return {
+    key,
+    header,
+    CellComponent: QueueTablePriorityCell,
+    getFilterableValue: (queueEntry) => queueEntry.priority.display,
+  };
+};

package/src/queue-table/cells/queue-table-queue-name-cell.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type QueueTableColumnFunction, type QueueTableCellComponentProps } from '../../types';
+
+// reprevents a column showing which queue a queue entry belongs to
+export const QueueTableQueueNameCell = ({ queueEntry }: QueueTableCellComponentProps) => {
+  return <>{queueEntry.queue.display}</>;
+};
+
+export const queueTableQueueNameColumn: QueueTableColumnFunction = (key, header) => ({
+  key,
+  header,
+  CellComponent: QueueTableQueueNameCell,
+  getFilterableValue: (queueEntry) => queueEntry.queue.display,
+});

package/src/queue-table/cells/queue-table-status-cell.component.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import QueueStatus from '../../queue-entry-table-components/queue-status.component';
+import { type QueueTableColumnFunction, type QueueTableCellComponentProps } from '../../types';
+import { type StatusColumnConfig } from '../../config-schema';
+
+export const queueTableStatusColumn: QueueTableColumnFunction = (key, header, config: StatusColumnConfig) => {
+  const QueueTableStatusCell = ({ queueEntry }: QueueTableCellComponentProps) => {
+    // Do not pass queue into status, as we do not want to render it
+    return <QueueStatus status={queueEntry.status} statusConfigs={config?.statusConfigs} />;
+  };
+
+  return {
+    key,
+    header,
+    CellComponent: QueueTableStatusCell,
+    getFilterableValue: (queueEntry) => queueEntry.status.display,
+  };
+};

package/src/queue-table/cells/queue-table-visit-attribute-queue-number-cell.component.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { type VisitAttributeQueueNumberColumnConfig } from '../../config-schema';
+import { type QueueTableColumnFunction, type QueueEntry, type QueueTableCellComponentProps } from '../../types';
+import { InlineNotification } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+export const queueTableVisitAttributeQueueNumberColumn: QueueTableColumnFunction = (
+  key,
+  header,
+  { visitQueueNumberAttributeUuid }: VisitAttributeQueueNumberColumnConfig,
+) => {
+  function getVisitQueueNumber(queueEntry: QueueEntry) {
+    return queueEntry.visit?.attributes?.find((e) => e?.attributeType?.uuid === visitQueueNumberAttributeUuid)?.value;
+  }
+
+  const QueueTableVisitAttributeQueueNumberCell = ({ queueEntry }: QueueTableCellComponentProps) => {
+    const { t } = useTranslation();
+    return (
+      <>
+        {visitQueueNumberAttributeUuid ? (
+          <span>{getVisitQueueNumber(queueEntry)}</span>
+        ) : (
+          <InlineNotification lowContrast hideCloseButton>
+            {t('visitQueueNumberAttributeUuid not configured', 'visitQueueNumberAttributeUuid not configured')}
+          </InlineNotification>
+        )}
+      </>
+    );
+  };
+
+  return {
+    key,
+    header,
+    CellComponent: QueueTableVisitAttributeQueueNumberCell,
+    getFilterableValue: getVisitQueueNumber,
+  };
+};

package/src/queue-table/cells/queue-table-visit-start-time-cell.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { type QueueTableColumnFunction, type QueueTableCellComponentProps, type QueueEntry } from '../../types';
+import { formatDatetime } from '@openmrs/esm-framework';
+
+export const queueTableVisitStartTimeColumn: QueueTableColumnFunction = (key, header) => {
+  function getVisitStartTime(queueEntry: QueueEntry) {
+    return formatDatetime(new Date(queueEntry.visit?.startDatetime));
+  }
+
+  const QueueTableVisitStartTimeCell = ({ queueEntry }: QueueTableCellComponentProps) => {
+    return <span>{getVisitStartTime(queueEntry)}</span>;
+  };
+
+  return {
+    key,
+    header,
+    CellComponent: QueueTableVisitStartTimeCell,
+    getFilterableValue: getVisitStartTime,
+  };
+};