@palladium-ethiopia/esm-clinical-workflow-app 5.4.2-pre.26 → 5.4.2-pre.31

package/src/patient-transfer/transfer-notes-table.component.tsx

@@ -0,0 +1,205 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import {
+  DataTable,
+  type DataTableCell,
+  type DataTableSortState,
+  Table,
+  TableCell,
+  TableContainer,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableExpandedRow,
+} from '@carbon/react';
+import orderBy from 'lodash-es/orderBy';
+import { formatDate, formatTime, parseDate, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
+import type { TransferNote } from './transfer-notes.resource';
+import styles from './transfer-notes-overview.scss';
+
+interface TransferNotesTableProps {
+  notes: Array<TransferNote>;
+  pageSize: number;
+  pageUrl: string;
+  urlLabel: string;
+}
+
+const TransferNotesTable: React.FC<TransferNotesTableProps> = ({ notes, pageSize, pageUrl, urlLabel }) => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isTablet = layout === 'tablet';
+
+  const [sortParams, setSortParams] = useState({ key: '', order: 'none' });
+
+  const tableHeaders = [
+    {
+      key: 'encounterDate',
+      header: t('date', 'Date'),
+    },
+    {
+      key: 'fromLocation',
+      header: t('fromLocation', 'From Location'),
+    },
+  ];
+
+  const sortDate = (myArray: Array<TransferNote>, order: string) => {
+    const sortOrder: 'asc' | 'desc' = order === 'DESC' ? 'desc' : 'asc';
+    return orderBy(myArray, [(note: TransferNote) => new Date(parseDate(note.encounterDate)).getTime()], [sortOrder]);
+  };
+
+  const sortString = (myArray: Array<TransferNote>, order: string, key: string) => {
+    const sortOrder: 'asc' | 'desc' = order === 'DESC' ? 'desc' : 'asc';
+    return orderBy(myArray, [(note: TransferNote) => (note as any)[key]?.toLowerCase() || ''], [sortOrder]);
+  };
+
+  const sortRows = (
+    cellA: any,
+    cellB: any,
+    {
+      sortDirection,
+      sortStates,
+      key,
+    }: {
+      sortDirection: string;
+      sortStates: any;
+      key: string;
+      locale: string;
+    },
+  ) => {
+    const sortKey = Object.keys(sortStates).find((k) => sortStates[k] === sortDirection);
+    setSortParams({ key: sortKey ?? key, order: sortDirection });
+    return 0;
+  };
+
+  const sortData = (data: Array<TransferNote>): Array<TransferNote> => {
+    if (!sortParams.key || sortParams.order === 'none') {
+      return data;
+    }
+
+    const { key, order } = sortParams;
+    let sortedData = [];
+
+    if (key === 'encounterDate') {
+      sortedData = sortDate(data, order);
+    } else if (key === 'fromLocation') {
+      sortedData = sortString(data, order, 'fromLocation');
+    } else {
+      sortedData = data;
+    }
+
+    return sortedData;
+  };
+
+  const { results: paginatedNotes, goTo, currentPage } = usePagination(sortData(notes), pageSize);
+
+  const tableRows = React.useMemo(() => {
+    return paginatedNotes.map((note) => ({
+      ...note,
+      id: note.id,
+      encounterDate: formatDate(new Date(note.encounterDate), { mode: 'wide' }),
+      fromLocation: note.fromLocation,
+      observations: note.observations, // Include all observations for dynamic display
+    }));
+  }, [paginatedNotes]);
+
+  return (
+    <div>
+      <DataTable
+        rows={tableRows}
+        headers={tableHeaders}
+        isSortable
+        size={isTablet ? 'lg' : 'sm'}
+        useZebraStyles
+        sortRow={sortRows}>
+        {({
+          getExpandedRowProps,
+          getExpandHeaderProps,
+          getHeaderProps,
+          getRowProps,
+          getTableContainerProps,
+          getTableProps,
+          headers,
+          rows,
+        }) => (
+          <TableContainer className={styles.tableContainer} {...getTableContainerProps()}>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+                  {headers.map((header, i) => (
+                    <TableHeader
+                      key={i}
+                      {...getHeaderProps({
+                        header,
+                      })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, i) => (
+                  <React.Fragment key={row.id}>
+                    <TableExpandRow {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableExpandRow>
+                    {row.isExpanded ? (
+                      <TableExpandedRow
+                        className={styles.expandedRow}
+                        colSpan={headers.length + 1}
+                        {...getExpandedRowProps({ row })}>
+                        <div className={styles.container} key={i}>
+                          {tableRows?.[i]?.observations && tableRows[i].observations.length > 0 ? (
+                            <div className={styles.copy}>
+                              {tableRows[i].observations.map((obs, obsIndex) => (
+                                <div key={obsIndex} className={styles.observationRow}>
+                                  <div className={styles.observationLabel}>{obs.conceptName}:</div>
+                                  <div className={styles.observationValue}>{obs.value}</div>
+                                </div>
+                              ))}
+                              <span className={styles.metadata}>
+                                {formatTime(new Date(tableRows?.[i]?.encounterDate))} &middot;{' '}
+                                {tableRows?.[i]?.encounterProvider}
+                                {tableRows?.[i]?.encounterProviderRole
+                                  ? `, ${tableRows?.[i]?.encounterProviderRole}`
+                                  : ''}
+                              </span>
+                            </div>
+                          ) : (
+                            <span className={styles.copy}>
+                              {t('noTransferDataToDisplay', 'No transfer data to display')}
+                            </span>
+                          )}
+                        </div>
+                      </TableExpandedRow>
+                    ) : (
+                      <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                    )}
+                  </React.Fragment>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      <PatientChartPagination
+        pageNumber={currentPage}
+        totalItems={notes.length}
+        currentItems={paginatedNotes.length}
+        pageSize={pageSize}
+        onPageNumberChange={({ page }) => goTo(page)}
+        dashboardLinkUrl={pageUrl}
+        dashboardLinkLabel={urlLabel}
+      />
+    </div>
+  );
+};
+
+export default TransferNotesTable;

package/src/patient-transfer/transfer-notes.resource.ts

@@ -0,0 +1,93 @@
+import { openmrsFetch, restBaseUrl, useConfig, type Encounter, type Obs } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { useMemo } from 'react';
+import type { ClinicalWorkflowConfig } from '../config-schema';
+
+export interface TransferObservation {
+  conceptUuid: string;
+  conceptName: string;
+  value: string;
+  obsDatetime: string;
+}
+
+export interface TransferNote {
+  id: string;
+  encounterUuid: string;
+  encounterDate: string;
+  transferDate: string;
+  fromLocation: string;
+  encounterProvider: string;
+  encounterProviderRole: string;
+  observations: TransferObservation[];
+}
+
+export function useTransferNotes(patientUuid: string, visitUuid: string | null) {
+  const config = useConfig<ClinicalWorkflowConfig>();
+  const { transferEncounterTypeUuid } = config;
+  const customRepresentation =
+    'custom:(uuid,display,encounterDatetime,patient,obs:(uuid,concept:(uuid,display),value,obsDatetime),' +
+    'encounterProviders:(uuid,display,' +
+    'encounterRole:(uuid,display),' +
+    'provider:(uuid,person:(uuid,display))),' +
+    'location:(uuid,display),visit:(uuid))';
+
+  // Only fetch transfer encounters for the current visit
+  const encountersApiUrl = visitUuid
+    ? `${restBaseUrl}/encounter?patient=${patientUuid}&visit=${visitUuid}&encounterType=${transferEncounterTypeUuid}&v=${customRepresentation}`
+    : null;
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Encounter[] } }, Error>(
+    encountersApiUrl,
+    openmrsFetch,
+  );
+
+  const mapTransferNoteProperties = (encounter: Encounter, index: number): TransferNote => {
+    const obs = encounter.obs || [];
+
+    // Dynamically map all observations from the transfer form
+    const observations: TransferObservation[] = obs
+      .filter((o) => o.concept && o.value) // Only include observations with concept and value
+      .map((observation) => ({
+        conceptUuid: observation.concept?.uuid || '',
+        conceptName: observation.concept?.display || 'Unknown',
+        value: getObsValue(observation),
+        obsDatetime: observation.obsDatetime || encounter.encounterDatetime,
+      }))
+      .sort((a, b) => a.conceptName.localeCompare(b.conceptName)); // Sort by concept name
+
+    return {
+      id: `${index}`,
+      encounterUuid: encounter.uuid,
+      encounterDate: encounter.encounterDatetime,
+      transferDate: encounter.encounterDatetime,
+      fromLocation: encounter.location?.display || 'Not specified',
+      encounterProvider: encounter.encounterProviders?.[0]?.provider?.person?.display || 'Unknown',
+      encounterProviderRole: encounter.encounterProviders?.[0]?.encounterRole?.display || '',
+      observations,
+    };
+  };
+
+  const formattedTransferNotes = data?.data?.results
+    ?.map(mapTransferNoteProperties)
+    ?.sort((noteA, noteB) => new Date(noteB.encounterDate).getTime() - new Date(noteA.encounterDate).getTime());
+
+  return {
+    transferNotes: data ? formattedTransferNotes : null,
+    error,
+    isLoading,
+    isValidating,
+    mutateTransferNotes: mutate,
+  };
+}
+
+function getObsValue(observation: Obs): string {
+  if (!observation) {
+    return '';
+  }
+
+  if (typeof observation.value === 'object' && observation.value !== null) {
+    return (observation.value as any).display || String(observation.value);
+  }
+
+  return String(observation.value || '');
+}

package/src/routes.json

@@ -71,6 +71,20 @@
       },
       "online": true,
       "offline": true
+    },
+    {
+      "name": "queue-table-transfer-column",
+      "component": "queueTableTransferColumn",
+      "slot": "queue-table-transfer-status-slot"
+    },
+    {
+      "name": "transfer-notes-overview-widget",
+      "component": "transferNotesOverview",
+      "slot": "patient-chart-summary-dashboard-slot",
+      "meta": {
+        "fullWidth": false
+      },
+      "order": 6
     }
   ],
   "workspaces": [
@@ -101,6 +115,11 @@
       "component": "@openmrs/esm-patient-forms-app#exportedPatientFormEntryWorkspace",
       "window": "clinical-workflow-window"
     },
+    {
+      "name": "patient-transfer-form-entry-workspace",
+      "component": "@openmrs/esm-patient-forms-app#exportedPatientFormEntryWorkspace",
+      "window": "patient-transfer"
+    },
     {
       "name": "visit-notes-form-shadow-workspace",
       "component": "visitNotesFormWorkspace",
@@ -119,6 +138,14 @@
       "group": "patient-chart",
       "icon": "visitNoteActionButton",
       "order": 3
+    },
+    {
+      "name": "patient-transfer",
+      "group": "patient-chart",
+      "icon": "patientTransferActionButton",
+      "order": 4,
+      "width": "wider",
+      "canMaximize": true
     }
   ],
   "workspaceGroups2": [
@@ -127,5 +154,15 @@
       "overlay": true,
       "persistence": "closable"
     }
+  ],
+  "modals": [
+    {
+      "name": "confirm-transfer-dialog",
+      "component": "confirmTransferDialog"
+    },
+    {
+      "name": "patient-transfer-details-modal",
+      "component": "patientTransferDetailsModal"
+    }
   ]
 }

package/src/types/index.ts

@@ -0,0 +1,15 @@
+export interface QueueEntry {
+  uuid: string;
+  patient: {
+    uuid: string;
+    display?: string;
+  };
+  visit: {
+    uuid: string;
+    display?: string;
+  };
+  status?: {
+    uuid: string;
+    display?: string;
+  };
+}

package/translations/am.json

@@ -73,6 +73,7 @@
   "free": "Free",
   "freeDetails": "Free Details",
   "fromDateToDate": "{{fromDate}} - {{toDate}}",
+  "fromLocation": "Transfer From",
   "gender": "Gender",
   "id": "ID",
   "identifier": "Identifier",
@@ -92,6 +93,7 @@
   "medicoLegalCases": "Medico Legal Cases",
   "middleName": "Middle Name",
   "months": "Months",
+  "moveToQueueQuestion": "Do you want to move the patient to a queue now?",
   "name": "Name",
   "nextPage": "Next page",
   "noDiagnosesFound": "No diagnoses found",
@@ -117,6 +119,7 @@
   "patientRegistrationError": "Error registering patient",
   "patientRegistrationErrorSubtitle": "Please try again.",
   "patientRegistrationSuccess": "Patient registered successfully",
+  "patientTransferInformation": "Patient Transfer Information",
   "paymentMethods": "Payment Methods",
   "presumed": "Presumed",
   "previousPage": "Previous page",
@@ -150,6 +153,10 @@
   "timeCompleted": "Time completed",
   "timeline": "Timeline",
   "timeStarted": "Time started",
+  "transferDate": "Transfer Date",
+  "transferFormSaved": "Patient transfer form saved",
+  "transferNote": "Transfer Note",
+  "transferPatient": "Transfer Patient",
   "triageDashboard": "Triage Dashboard",
   "triageForm": "Triage form",
   "updateVisitWithBillingInfo": "Update Visit With Billing Information",
@@ -164,5 +171,6 @@
   "Visits": "Visits",
   "visitType": "Visit Type",
   "years": "Years",
+  "yesMoveToQueue": "Yes, move to queue",
   "zone": "Zone"
 }

package/translations/en.json

@@ -73,6 +73,7 @@
   "free": "Free",
   "freeDetails": "Free Details",
   "fromDateToDate": "{{fromDate}} - {{toDate}}",
+  "fromLocation": "Transfer From",
   "gender": "Gender",
   "id": "ID",
   "identifier": "Identifier",
@@ -92,6 +93,7 @@
   "medicoLegalCases": "Medico Legal Cases",
   "middleName": "Middle Name",
   "months": "Months",
+  "moveToQueueQuestion": "Do you want to move the patient to a queue now?",
   "name": "Name",
   "nextPage": "Next page",
   "noDiagnosesFound": "No diagnoses found",
@@ -117,6 +119,7 @@
   "patientRegistrationError": "Error registering patient",
   "patientRegistrationErrorSubtitle": "Please try again.",
   "patientRegistrationSuccess": "Patient registered successfully",
+  "patientTransferInformation": "Patient Transfer Information",
   "paymentMethods": "Payment Methods",
   "presumed": "Presumed",
   "previousPage": "Previous page",
@@ -150,6 +153,10 @@
   "timeCompleted": "Time completed",
   "timeline": "Timeline",
   "timeStarted": "Time started",
+  "transferDate": "Transfer Date",
+  "transferFormSaved": "Patient transfer form saved",
+  "transferNote": "Transfer Note",
+  "transferPatient": "Transfer Patient",
   "triageDashboard": "Triage Dashboard",
   "triageForm": "Triage form",
   "updateVisitWithBillingInfo": "Update Visit With Billing Information",
@@ -164,5 +171,6 @@
   "Visits": "Visits",
   "visitType": "Visit Type",
   "years": "Years",
+  "yesMoveToQueue": "Yes, move to queue",
   "zone": "Zone"
 }