vintasend 0.4.0 → 0.4.7

package/dist/examples/vintasend-medplum-example/src/pages/patient/LabsPage.tsx

@@ -0,0 +1,334 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import {
+  Flex,
+  Paper,
+  Group,
+  Button,
+  Divider,
+  ActionIcon,
+  ScrollArea,
+  Stack,
+  Skeleton,
+  Text,
+  Box,
+  Modal,
+} from '@mantine/core';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import type { JSX } from 'react';
+import type { ServiceRequest } from '@medplum/fhirtypes';
+import { getReferenceString } from '@medplum/core';
+import { useNavigate, useParams } from 'react-router';
+import { useMedplum } from '@medplum/react';
+import { showErrorNotification } from '../../utils/notifications';
+import { IconPlus } from '@tabler/icons-react';
+import { LabListItem } from '../../components/labs/LabListItem';
+import { LabSelectEmpty } from '../../components/labs/LabSelectEmpty';
+import { LabOrderDetails } from '../../components/labs/LabOrderDetails';
+import { OrderLabsPage } from '../labs/OrderLabsPage';
+import { usePatient } from '../../hooks/usePatient';
+import cx from 'clsx';
+import classes from './LabsPage.module.css';
+
+type LabTab = 'open' | 'completed';
+
+export function LabsPage(): JSX.Element {
+  const { patientId, serviceRequestId } = useParams();
+  const navigate = useNavigate();
+  const medplum = useMedplum();
+
+  const [activeTab, setActiveTab] = useState<LabTab>('completed');
+  const [openOrders, setOpenOrders] = useState<ServiceRequest[]>([]);
+  const [completedOrders, setCompletedOrders] = useState<ServiceRequest[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [newOrderModalOpened, setNewOrderModalOpened] = useState<boolean>(false);
+
+  const patient = usePatient();
+  const patientReference = useMemo(() => (patient ? getReferenceString(patient) : undefined), [patient]);
+  const [currentOrder, setCurrentOrder] = useState<ServiceRequest>();
+
+  const fetchOrders = useCallback(async (): Promise<void> => {
+    if (!patientReference) {
+      showErrorNotification('Patient not found');
+      return;
+    }
+    try {
+      const searchParams = new URLSearchParams({
+        subject: patientReference,
+        _count: '100',
+        _sort: '-_lastUpdated',
+        _fields:
+          '_lastUpdated,code,status,orderDetail,category,subject,requester,performer,requisition,identifier,authoredOn,priority,reasonCode,note,supportingInfo,basedOn',
+      });
+
+      const results: ServiceRequest[] = await medplum.searchResources('ServiceRequest', searchParams, {
+        cache: 'no-cache',
+      });
+
+      setOpenOrders(filterOpenOrders(results));
+      setCompletedOrders(filterCompletedOrders(results));
+    } catch (error) {
+      showErrorNotification(error);
+    }
+  }, [medplum, patientReference]);
+
+  const fetchData = useCallback(async (): Promise<void> => {
+    setLoading(true);
+    try {
+      await fetchOrders();
+    } finally {
+      setLoading(false);
+    }
+  }, [fetchOrders]);
+
+  useEffect(() => {
+    if (patientId) {
+      fetchData().catch(showErrorNotification);
+    }
+  }, [patientId, fetchData]);
+
+  const handleOrderSelect = useCallback(
+    (order: ServiceRequest): string => {
+      return `/Patient/${patientId}/ServiceRequest/${order.id}`;
+    },
+    [patientId]
+  );
+
+  useEffect(() => {
+    const fetchOrder = async (): Promise<void> => {
+      if (serviceRequestId) {
+        const currentItems = activeTab === 'open' ? openOrders : completedOrders;
+        const order = currentItems.find((order: ServiceRequest) => order.id === serviceRequestId);
+        if (order) {
+          setCurrentOrder(order);
+        } else {
+          const order = await medplum.readResource('ServiceRequest', serviceRequestId);
+          if (order) {
+            setCurrentOrder(order);
+          }
+        }
+      } else {
+        setCurrentOrder(undefined);
+      }
+    };
+    fetchOrder().catch(showErrorNotification);
+  }, [activeTab, openOrders, completedOrders, serviceRequestId, medplum]);
+
+  const handleTabChange = (value: string): void => {
+    const newTab = value as LabTab;
+    setActiveTab(newTab);
+  };
+
+  const handleNewOrderCreated = (): void => {
+    setNewOrderModalOpened(false);
+
+    fetchData()
+      .then(() => {
+        setActiveTab('open');
+        navigate(`/Patient/${patientId}/ServiceRequest`)?.catch(console.error);
+      })
+      .catch(showErrorNotification);
+  };
+
+  const currentItems = activeTab === 'completed' ? completedOrders : openOrders;
+
+  return (
+    <Box w="100%" h="100%">
+      <Flex h="100%">
+        <Box w={350} h="100%">
+          <Flex direction="column" h="100%" className={classes.borderRight}>
+            <Paper>
+              <Flex h={64} align="center" justify="space-between" p="md">
+                <Group gap="xs">
+                  <Button
+                    className={cx(classes.button, { [classes.selected]: activeTab === 'completed' })}
+                    h={32}
+                    radius="xl"
+                    onClick={() => handleTabChange('completed')}
+                  >
+                    Completed
+                  </Button>
+
+                  <Button
+                    className={cx(classes.button, { [classes.selected]: activeTab === 'open' })}
+                    h={32}
+                    radius="xl"
+                    onClick={() => handleTabChange('open')}
+                  >
+                    Open
+                  </Button>
+                </Group>
+
+                <ActionIcon radius="50%" variant="filled" color="blue" onClick={() => setNewOrderModalOpened(true)}>
+                  <IconPlus size={16} />
+                </ActionIcon>
+              </Flex>
+            </Paper>
+
+            <Divider />
+            <Paper style={{ flex: 1, overflow: 'hidden' }}>
+              <ScrollArea h="100%" id="lab-list-scrollarea" p="0.5rem">
+                {loading && <LabListSkeleton />}
+                {!loading && currentItems.length === 0 && <EmptyLabsState activeTab={activeTab} />}
+                {!loading &&
+                  currentItems.length > 0 &&
+                  currentItems.map((item, index) => {
+                    return (
+                      <React.Fragment key={item.id}>
+                        <LabListItem
+                          item={item}
+                          selectedItem={currentOrder}
+                          activeTab={activeTab}
+                          onItemSelect={handleOrderSelect}
+                        />
+                        {index < currentItems.length - 1 && (
+                          <Box px="0.5rem">
+                            <Divider />
+                          </Box>
+                        )}
+                      </React.Fragment>
+                    );
+                  })}
+              </ScrollArea>
+            </Paper>
+          </Flex>
+        </Box>
+
+        {currentItems.length > 0 ? (
+          <>
+            <Box
+              h="100%"
+              style={{
+                flex: 1,
+              }}
+              className={classes.borderRight}
+            >
+              {currentOrder ? (
+                <LabOrderDetails key={currentOrder.id} order={currentOrder} />
+              ) : (
+                <LabSelectEmpty activeTab={'open'} />
+              )}
+            </Box>
+          </>
+        ) : (
+          <Flex direction="column" h="100%" style={{ flex: 1 }}>
+            <LabSelectEmpty activeTab={activeTab} />
+          </Flex>
+        )}
+      </Flex>
+
+      {/* New Order Modal */}
+      <Modal
+        opened={newOrderModalOpened}
+        onClose={() => setNewOrderModalOpened(false)}
+        size="xl"
+        centered
+        title="Order Labs"
+      >
+        <OrderLabsPage onSubmitLabOrder={handleNewOrderCreated} />
+      </Modal>
+    </Box>
+  );
+}
+
+function filterOpenOrders(orders: ServiceRequest[]): ServiceRequest[] {
+  const filteredOutStatuses = ['completed', 'draft', 'entered-in-error'];
+  const completedServiceRequestIds = new Set<string>();
+  orders.forEach((order) => {
+    if (order.status === 'completed' && order.id) {
+      completedServiceRequestIds.add(order.id);
+    }
+  });
+
+  const completedRequisitionNumbers = new Set<string>();
+  const filtered = orders.filter((order) => {
+    if (filteredOutStatuses.includes(order.status || '')) {
+      return false;
+    }
+
+    if (order.basedOn) {
+      const basedOnCompleted = order.basedOn.find((basedOn) => {
+        if (basedOn.reference?.startsWith('ServiceRequest/')) {
+          const [, id] = basedOn.reference.split('/');
+          return completedServiceRequestIds.has(id);
+        }
+        return false;
+      });
+      if (basedOnCompleted) {
+        return false;
+      }
+    }
+
+    const requisitionNumber = order.requisition?.value;
+    if (requisitionNumber && completedRequisitionNumbers.has(requisitionNumber)) {
+      return false;
+    }
+
+    if (requisitionNumber) {
+      completedRequisitionNumbers.add(requisitionNumber);
+    }
+
+    return true;
+  });
+
+  return filtered.sort((a, b) => {
+    const aDate = a.meta?.lastUpdated || a.authoredOn;
+    const bDate = b.meta?.lastUpdated || b.authoredOn;
+    return new Date(bDate || 0).getTime() - new Date(aDate || 0).getTime();
+  });
+}
+
+function filterCompletedOrders(orders: ServiceRequest[]): ServiceRequest[] {
+  const completedRequisitionNumbers = new Set<string>();
+  const filtered = orders.filter((order) => {
+    if (order.status !== 'completed') {
+      return false;
+    }
+
+    const requisitionNumber = order.requisition?.value;
+    if (requisitionNumber && completedRequisitionNumbers.has(requisitionNumber)) {
+      return false;
+    }
+
+    if (requisitionNumber) {
+      completedRequisitionNumbers.add(requisitionNumber);
+    }
+
+    return true;
+  });
+
+  return filtered.sort((a, b) => {
+    const aDate = a.meta?.lastUpdated || a.authoredOn;
+    const bDate = b.meta?.lastUpdated || b.authoredOn;
+    return new Date(bDate || 0).getTime() - new Date(aDate || 0).getTime();
+  });
+}
+
+function EmptyLabsState({ activeTab }: { activeTab: LabTab }): JSX.Element {
+  return (
+    <Flex direction="column" h="100%" justify="center" align="center">
+      <Stack align="center" gap="md" pt="xl">
+        <Text size="md" c="dimmed" fw={400}>
+          No {activeTab} labs to display.
+        </Text>
+      </Stack>
+    </Flex>
+  );
+}
+
+function LabListSkeleton(): JSX.Element {
+  return (
+    <Stack gap="md" p="md">
+      {Array.from({ length: 6 }).map((_, index) => (
+        <Stack key={index}>
+          <Flex direction="column" gap="xs" align="flex-start">
+            <Skeleton height={16} width={`${Math.random() * 40 + 60}%`} />
+            <Skeleton height={14} width={`${Math.random() * 50 + 40}%`} />
+            <Skeleton height={14} width={`${Math.random() * 50 + 40}%`} />
+          </Flex>
+          <Divider />
+        </Stack>
+      ))}
+    </Stack>
+  );
+}

package/dist/examples/vintasend-medplum-example/src/pages/patient/PatientPage.module.css

@@ -0,0 +1,24 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  height: calc(100vh - var(--app-shell-header-height, 0));
+  overflow: hidden;
+}
+
+.sidebar {
+  flex: 1;
+  width: 350px;
+  height: 100%;
+}
+
+.scrollArea {
+  height: 100%;
+}
+
+.content {
+  width: calc(100% - 350px);
+  height: 100%;
+  overflow: auto;
+  border-inline-start: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}

package/dist/examples/vintasend-medplum-example/src/pages/patient/PatientPage.test.tsx

@@ -0,0 +1,154 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { MantineProvider } from '@mantine/core';
+import { Notifications } from '@mantine/notifications';
+import { HomerSimpson, MockClient } from '@medplum/mock';
+import { MedplumProvider } from '@medplum/react';
+import * as medplumReact from '@medplum/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter, Routes, Route } from 'react-router';
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { PatientPage } from './PatientPage';
+import { TimelineTab } from './TimelineTab';
+import { EditTab } from './EditTab';
+
+describe('PatientPage', () => {
+  let medplum: MockClient;
+
+  beforeEach(async () => {
+    medplum = new MockClient();
+    vi.clearAllMocks();
+  });
+
+  const setup = (initialPath = '/Patient/patient-123'): ReturnType<typeof render> => {
+    return render(
+      <MemoryRouter initialEntries={[initialPath]}>
+        <MedplumProvider medplum={medplum}>
+          <MantineProvider>
+            <Notifications />
+            <Routes>
+              <Route path="/Patient/:patientId/*" element={<PatientPage />}>
+                <Route path="edit" element={<EditTab />} />
+                <Route path="" element={<TimelineTab />} />
+                <Route path="*" element={<TimelineTab />} />
+              </Route>
+            </Routes>
+          </MantineProvider>
+        </MedplumProvider>
+      </MemoryRouter>
+    );
+  };
+
+  test('shows loader when patient is loading', async () => {
+    // Use a non-existent patient ID to simulate loading
+    setup('/Patient/non-existent-patient');
+
+    await waitFor(() => {
+      const loader = document.querySelector('.mantine-Loader-root');
+      expect(loader).toBeInTheDocument();
+    });
+  });
+
+  test('renders patient page when patient is loaded', async () => {
+    setup(`/Patient/${HomerSimpson.id}`);
+
+    await waitFor(() => {
+      expect(screen.getByText('Timeline')).toBeInTheDocument();
+    });
+  });
+
+  test('renders all tabs in navigation', async () => {
+    setup(`/Patient/${HomerSimpson.id}`);
+
+    await waitFor(() => {
+      expect(screen.getByText('Timeline')).toBeInTheDocument();
+    });
+
+    // Check for some key tabs
+    expect(screen.getByText('Edit')).toBeInTheDocument();
+    expect(screen.getByText('Visits')).toBeInTheDocument();
+    expect(screen.getByText('Tasks')).toBeInTheDocument();
+    expect(screen.getByText('Meds')).toBeInTheDocument();
+  });
+
+  test('sets initial tab from URL path', async () => {
+    setup(`/Patient/${HomerSimpson.id}/edit`);
+
+    await waitFor(() => {
+      const editTab = screen.getByText('Edit');
+      expect(editTab).toBeInTheDocument();
+      expect(editTab.closest('[role="tab"]')).toHaveAttribute('aria-selected', 'true');
+    });
+  });
+
+  test('handles tab change when clicking on tab', async () => {
+    const user = userEvent.setup();
+    setup(`/Patient/${HomerSimpson.id}`);
+
+    await waitFor(() => {
+      expect(screen.getByText('Timeline')).toBeInTheDocument();
+    });
+
+    const editTab = screen.getByText('Edit');
+    await user.click(editTab);
+
+    await waitFor(() => {
+      const editTab = screen.getByText('Edit');
+      expect(editTab).toBeInTheDocument();
+      expect(editTab.closest('[role="tab"]')).toHaveAttribute('aria-selected', 'true');
+    });
+  });
+
+  test('does not show tabs when patient is loading', async () => {
+    setup('/Patient/non-existent-patient');
+
+    await waitFor(() => {
+      const loader = document.querySelector('.mantine-Loader-root');
+      expect(loader).toBeInTheDocument();
+    });
+
+    expect(screen.queryByText('Timeline')).not.toBeInTheDocument();
+  });
+
+  test('defaults to timeline tab when URL does not match any tab', async () => {
+    setup(`/Patient/${HomerSimpson.id}/unknown-path`);
+
+    await waitFor(() => {
+      const timelineTab = screen.getByText('Timeline');
+      expect(timelineTab).toBeInTheDocument();
+      expect(timelineTab.closest('[role="tab"]')).toHaveAttribute('aria-selected', 'true');
+    });
+  });
+
+  test('renders homer summary information in sidebar', async () => {
+    const patientSummarySpy = vi.spyOn(medplumReact, 'PatientSummary');
+    setup(`/Patient/${HomerSimpson.id}`);
+
+    await waitFor(() => {
+      expect(patientSummarySpy).toHaveBeenCalled();
+      expect(screen.getByText('Male')).toBeInTheDocument();
+      expect(screen.getByText('1956-05-12 (069Y)')).toBeInTheDocument();
+    });
+  });
+
+  test('handles empty pathname correctly', async () => {
+    setup(`/Patient/${HomerSimpson.id}/`);
+
+    await waitFor(() => {
+      const timelineTab = screen.getByText('Timeline');
+      expect(timelineTab).toBeInTheDocument();
+      expect(timelineTab.closest('[role="tab"]')).toHaveAttribute('aria-selected', 'true');
+    });
+  });
+
+  test('highlights the Edit tab in a case-insensitive way even when /EDIT is used', async () => {
+    setup(`/Patient/${HomerSimpson.id}/EDIT`);
+
+    await waitFor(() => {
+      const editTab = screen.getByText('Edit');
+      expect(editTab).toBeInTheDocument();
+      expect(editTab.closest('[role="tab"]')).toHaveAttribute('aria-selected', 'true');
+    });
+  });
+});

package/dist/examples/vintasend-medplum-example/src/pages/patient/PatientPage.tsx

@@ -0,0 +1,115 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Loader, Modal, ScrollArea } from '@mantine/core';
+import { getReferenceString, isOk } from '@medplum/core';
+import type { OperationOutcome } from '@medplum/fhirtypes';
+import { Document, OperationOutcomeAlert, PatientSummary, useMedplum } from '@medplum/react';
+import { useCallback, useEffect, useState } from 'react';
+import type { JSX } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router';
+import type { Location } from 'react-router';
+import { usePatient } from '../../hooks/usePatient';
+import classes from './PatientPage.module.css';
+import { formatPatientPageTabUrl, getPatientPageTabs } from './PatientPage.utils';
+import type { PatientPageTabInfo } from './PatientPage.utils';
+import { PatientTabsNavigation } from './PatientTabsNavigation';
+import { OrderLabsPage } from '../labs/OrderLabsPage';
+
+function getTabFromLocation(location: Location, tabs: PatientPageTabInfo[]): PatientPageTabInfo | undefined {
+  const tabId = location.pathname.split('/')[3] ?? '';
+  const tab = tabId
+    ? tabs.find((t) => t.id === tabId || t.url.toLowerCase().startsWith(tabId.toLowerCase()))
+    : undefined;
+  return tab;
+}
+
+export function PatientPage(): JSX.Element {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const medplum = useMedplum();
+  const membership = medplum.getProjectMembership();
+  const [outcome, setOutcome] = useState<OperationOutcome>();
+  const patient = usePatient({ setOutcome });
+  const [isLabsModalOpen, setIsLabsModalOpen] = useState(false);
+  const tabs = getPatientPageTabs(membership);
+  const [currentTab, setCurrentTab] = useState<string>(() => {
+    return (getTabFromLocation(location, tabs) ?? tabs[0]).id;
+  });
+
+  /**
+   * Handles a tab change event.
+   * @param newTabName - The new tab name.
+   */
+  const onTabChange = useCallback(
+    (newTabName: string | null): void => {
+      if (!patient?.id) {
+        console.error('Not within a patient context');
+        return;
+      }
+      const tab = newTabName ? tabs.find((t) => t.id === newTabName) : tabs[0];
+      if (tab) {
+        setCurrentTab(tab.id);
+        navigate(formatPatientPageTabUrl(patient.id, tab))?.catch(console.error);
+      }
+    },
+    [navigate, patient?.id, tabs]
+  );
+
+  // Rectify the active tab UI with the current URL. This is necessary because the active tab can be changed
+  // in ways other than clicking on a tab in the navigation bar.
+  useEffect(() => {
+    const newTab = getTabFromLocation(location, tabs);
+    if (newTab && newTab.id !== currentTab) {
+      setCurrentTab(newTab.id);
+    }
+  }, [currentTab, location, tabs]);
+
+  const handleCloseLabsModal = useCallback(() => {
+    setIsLabsModalOpen(false);
+  }, []);
+
+  if (outcome && !isOk(outcome)) {
+    return (
+      <Document>
+        <OperationOutcomeAlert outcome={outcome} />
+      </Document>
+    );
+  }
+
+  const patientId = patient?.id;
+  if (!patientId) {
+    return (
+      <Document>
+        <Loader />
+      </Document>
+    );
+  }
+
+  return (
+    <>
+      <div key={getReferenceString(patient)} className={classes.container}>
+        <div className={classes.sidebar}>
+          <ScrollArea className={classes.scrollArea}>
+            <PatientSummary
+              patient={patient}
+              onClickResource={(resource) =>
+                navigate(`/Patient/${patientId}/${resource.resourceType}/${resource.id}`)?.catch(console.error)
+              }
+              onRequestLabs={() => {
+                setIsLabsModalOpen(true);
+              }}
+            />
+          </ScrollArea>
+        </div>
+
+        <div className={classes.content}>
+          <PatientTabsNavigation tabs={tabs} currentTab={currentTab} onTabChange={onTabChange} />
+          <Outlet />
+        </div>
+      </div>
+      <Modal opened={isLabsModalOpen} onClose={handleCloseLabsModal} size="xl" centered title="Order Labs">
+        <OrderLabsPage onSubmitLabOrder={handleCloseLabsModal} />
+      </Modal>
+    </>
+  );
+}