vintasend 0.4.0 → 0.4.7

package/dist/examples/vintasend-medplum-example/src/components/labs/LabListItem.test.tsx

@@ -0,0 +1,234 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { MantineProvider } from '@mantine/core';
+import { MockClient } from '@medplum/mock';
+import type { Practitioner, ServiceRequest } from '@medplum/fhirtypes';
+import { MedplumProvider } from '@medplum/react';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { LabListItem } from './LabListItem';
+
+describe('LabListItem', () => {
+  let medplum: MockClient;
+
+  beforeEach(() => {
+    medplum = new MockClient();
+    vi.clearAllMocks();
+  });
+
+  const setup = (
+    item: ServiceRequest,
+    selectedItem: ServiceRequest | undefined,
+    activeTab: 'open' | 'completed',
+    onItemSelect: (item: ServiceRequest) => string = (i) => `/lab/${i.id}`
+  ): ReturnType<typeof render> => {
+    return render(
+      <MemoryRouter>
+        <MedplumProvider medplum={medplum}>
+          <MantineProvider>
+            <LabListItem item={item} selectedItem={selectedItem} activeTab={activeTab} onItemSelect={onItemSelect} />
+          </MantineProvider>
+        </MedplumProvider>
+      </MemoryRouter>
+    );
+  };
+
+  const baseServiceRequest: ServiceRequest = {
+    resourceType: 'ServiceRequest',
+    id: 'sr-1',
+    status: 'active',
+    intent: 'order',
+    subject: { reference: 'Patient/123' },
+    code: { text: 'CBC Panel' },
+    authoredOn: '2024-01-15T10:00:00Z',
+  };
+
+  describe('Display text', () => {
+    test('renders code text when available', () => {
+      setup(baseServiceRequest, undefined, 'open');
+      expect(screen.getByText('CBC Panel')).toBeInTheDocument();
+    });
+
+    test('renders multiple codes joined by comma', () => {
+      const item: ServiceRequest = {
+        ...baseServiceRequest,
+        code: {
+          coding: [{ display: 'Test A' }, { display: 'Test B' }],
+        },
+      };
+      setup(item, undefined, 'open');
+      expect(screen.getByText('Test A, Test B')).toBeInTheDocument();
+    });
+
+    test('renders first coding display when only one code', () => {
+      const item: ServiceRequest = {
+        ...baseServiceRequest,
+        code: {
+          coding: [{ display: 'Single Test' }],
+        },
+      };
+      setup(item, undefined, 'open');
+      expect(screen.getByText('Single Test')).toBeInTheDocument();
+    });
+
+    test('renders fallback text when no code available', () => {
+      const item: ServiceRequest = {
+        ...baseServiceRequest,
+        code: undefined,
+      };
+      setup(item, undefined, 'open');
+      expect(screen.getByText('Lab Order')).toBeInTheDocument();
+    });
+  });
+
+  describe('Status badge', () => {
+    test('shows active status badge', () => {
+      setup(baseServiceRequest, undefined, 'open');
+      expect(screen.getByText('Active')).toBeInTheDocument();
+    });
+
+    test('shows draft status badge', () => {
+      const item: ServiceRequest = { ...baseServiceRequest, status: 'draft' };
+      setup(item, undefined, 'open');
+      expect(screen.getByText('Draft')).toBeInTheDocument();
+    });
+
+    test('shows requested status badge', () => {
+      const item: ServiceRequest = { ...baseServiceRequest, status: 'requested' as ServiceRequest['status'] };
+      setup(item, undefined, 'open');
+      expect(screen.getByText('Requested')).toBeInTheDocument();
+    });
+
+    test('shows on-hold status badge', () => {
+      const item: ServiceRequest = { ...baseServiceRequest, status: 'on-hold' };
+      setup(item, undefined, 'open');
+      expect(screen.getByText('On Hold')).toBeInTheDocument();
+    });
+
+    test('shows revoked status badge', () => {
+      const item: ServiceRequest = { ...baseServiceRequest, status: 'revoked' };
+      setup(item, undefined, 'open');
+      expect(screen.getByText('Revoked')).toBeInTheDocument();
+    });
+
+    test('shows cancelled status badge', () => {
+      const item: ServiceRequest = { ...baseServiceRequest, status: 'cancelled' as ServiceRequest['status'] };
+      setup(item, undefined, 'open');
+      expect(screen.getByText('Cancelled')).toBeInTheDocument();
+    });
+
+    test('shows error status badge for entered-in-error', () => {
+      const item: ServiceRequest = { ...baseServiceRequest, status: 'entered-in-error' };
+      setup(item, undefined, 'open');
+      expect(screen.getByText('Error')).toBeInTheDocument();
+    });
+
+    test('shows completed status badge', () => {
+      const item: ServiceRequest = { ...baseServiceRequest, status: 'completed' };
+      setup(item, undefined, 'open');
+      expect(screen.getByText('Completed')).toBeInTheDocument();
+    });
+
+    test('shows unknown status badge', () => {
+      const item: ServiceRequest = { ...baseServiceRequest, status: 'unknown' };
+      setup(item, undefined, 'open');
+      expect(screen.getByText('Unknown')).toBeInTheDocument();
+    });
+
+    test('shows raw status when unrecognized', () => {
+      const item: ServiceRequest = { ...baseServiceRequest, status: 'custom-status' as ServiceRequest['status'] };
+      setup(item, undefined, 'open');
+      expect(screen.getByText('custom-status')).toBeInTheDocument();
+    });
+
+    test('does not show status badge on completed tab', () => {
+      setup(baseServiceRequest, undefined, 'completed');
+      expect(screen.queryByText('Active')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Sub text', () => {
+    test('shows ordered date', () => {
+      setup(baseServiceRequest, undefined, 'open');
+      expect(screen.getByText(/Ordered/)).toBeInTheDocument();
+    });
+
+    test('shows ordered date with requester name when available', async () => {
+      const practitioner: Practitioner = {
+        resourceType: 'Practitioner',
+        id: 'prac-1',
+        name: [{ given: ['Dr.'], family: 'Smith' }],
+      };
+      await medplum.createResource(practitioner);
+
+      const item: ServiceRequest = {
+        ...baseServiceRequest,
+        requester: { reference: 'Practitioner/prac-1' },
+      };
+      setup(item, undefined, 'open');
+      // The requester is loaded asynchronously, we just verify the component renders
+      expect(screen.getByText(/Ordered/)).toBeInTheDocument();
+    });
+
+    test('uses lastUpdated when authoredOn not available', () => {
+      const item: ServiceRequest = {
+        ...baseServiceRequest,
+        authoredOn: undefined,
+        meta: { lastUpdated: '2024-02-20T15:00:00Z' },
+      };
+      setup(item, undefined, 'open');
+      expect(screen.getByText(/Ordered/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Additional info', () => {
+    test('shows REQ number for open tab', () => {
+      const item: ServiceRequest = {
+        ...baseServiceRequest,
+        requisition: { value: 'REQ-12345' },
+      };
+      setup(item, undefined, 'open');
+      expect(screen.getByText('REQ #REQ-12345')).toBeInTheDocument();
+    });
+
+    test('shows completion date for completed tab', () => {
+      const item: ServiceRequest = {
+        ...baseServiceRequest,
+        meta: { lastUpdated: '2024-03-15T10:00:00Z' },
+      };
+      setup(item, undefined, 'completed');
+      expect(screen.getByText(/Completed/)).toBeInTheDocument();
+    });
+
+    test('shows Unknown date when no lastUpdated on completed tab', () => {
+      const item: ServiceRequest = {
+        ...baseServiceRequest,
+        meta: undefined,
+      };
+      setup(item, undefined, 'completed');
+      expect(screen.getByText(/Completed Unknown date/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Selection', () => {
+    test('applies selected styling when item is selected', () => {
+      setup(baseServiceRequest, baseServiceRequest, 'open');
+      expect(screen.getByText('CBC Panel')).toBeInTheDocument();
+    });
+
+    test('does not apply selected styling when different item is selected', () => {
+      const otherItem: ServiceRequest = { ...baseServiceRequest, id: 'sr-2' };
+      setup(baseServiceRequest, otherItem, 'open');
+      expect(screen.getByText('CBC Panel')).toBeInTheDocument();
+    });
+  });
+
+  describe('Link', () => {
+    test('calls onItemSelect to generate link', () => {
+      const onItemSelect = vi.fn((item: ServiceRequest) => `/custom/${item.id}`);
+      setup(baseServiceRequest, undefined, 'open', onItemSelect);
+      expect(onItemSelect).toHaveBeenCalledWith(baseServiceRequest);
+    });
+  });
+});

package/dist/examples/vintasend-medplum-example/src/components/labs/LabListItem.tsx

@@ -0,0 +1,143 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Group, Stack, Text, Badge } from '@mantine/core';
+import { formatDate, formatHumanName } from '@medplum/core';
+import type { HumanName, Practitioner, ServiceRequest } from '@medplum/fhirtypes';
+import type { JSX } from 'react';
+import { MedplumLink, useResource } from '@medplum/react';
+import cx from 'clsx';
+import classes from './LabListItem.module.css';
+
+type LabTab = 'open' | 'completed';
+
+interface LabListItemProps {
+  item: ServiceRequest;
+  selectedItem: ServiceRequest | undefined;
+  activeTab: LabTab;
+  onItemSelect: (item: ServiceRequest) => string;
+}
+
+export function LabListItem(props: LabListItemProps): JSX.Element {
+  const { item, selectedItem, activeTab, onItemSelect } = props;
+  const isSelected = selectedItem?.id === item.id;
+  const requester = useResource(item.requester) as Practitioner | undefined;
+
+  return (
+    <MedplumLink to={onItemSelect(item)}>
+      <Group
+        align="center"
+        wrap="nowrap"
+        className={cx(classes.contentContainer, {
+          [classes.selected]: isSelected,
+        })}
+      >
+        <Stack gap={0} flex={1}>
+          <Group justify="space-between" align="flex-start">
+            <Text fw={700} className={classes.title} flex={1}>
+              {getDisplayText(item)}
+            </Text>
+            {activeTab !== 'completed' && (
+              <Badge size="sm" color={getStatusColor(item.status)} variant="light">
+                {getStatusDisplayText(item.status)}
+              </Badge>
+            )}
+          </Group>
+          {getAdditionalInfo(item, activeTab).map((info, index) => (
+            <Text key={index} size="sm">
+              {info}
+            </Text>
+          ))}
+          <Text size="sm" c="dimmed">
+            {getSubText(item, requester)}
+          </Text>
+        </Stack>
+      </Group>
+    </MedplumLink>
+  );
+}
+
+const getStatusColor = (status: string | undefined): string => {
+  switch (status) {
+    case 'active':
+      return 'blue';
+    case 'draft':
+    case 'requested':
+      return 'yellow';
+    case 'on-hold':
+      return 'orange';
+    case 'revoked':
+    case 'cancelled':
+    case 'entered-in-error':
+      return 'red';
+    case 'completed':
+      return 'green';
+    case 'unknown':
+      return 'gray';
+    default:
+      return 'gray';
+  }
+};
+
+const getStatusDisplayText = (status: string | undefined): string => {
+  switch (status) {
+    case 'active':
+      return 'Active';
+    case 'draft':
+      return 'Draft';
+    case 'requested':
+      return 'Requested';
+    case 'on-hold':
+      return 'On Hold';
+    case 'revoked':
+      return 'Revoked';
+    case 'cancelled':
+      return 'Cancelled';
+    case 'entered-in-error':
+      return 'Error';
+    case 'completed':
+      return 'Completed';
+    case 'unknown':
+      return 'Unknown';
+    default:
+      return status || 'Unknown';
+  }
+};
+
+const getDisplayText = (item: ServiceRequest): string => {
+  // If there are multiple codes (2 or more), show them separated by commas
+  if (item.code?.coding && item.code.coding.length >= 2) {
+    return item.code.coding.map((coding) => coding.display).join(', ');
+  }
+
+  // If there's a text field and only one code, use the text field
+  if (item.code?.text) {
+    return item.code.text;
+  }
+
+  // Otherwise, show the first code or fallback
+  return item.code?.coding?.[0]?.display || 'Lab Order';
+};
+
+const getSubText = (item: ServiceRequest, requester: Practitioner | undefined): string => {
+  // Use authoredOn if available, otherwise fall back to meta.lastUpdated
+  const date = formatDate(item.authoredOn || item.meta?.lastUpdated);
+  if (requester?.resourceType === 'Practitioner') {
+    return `Ordered ${date} by ${formatHumanName(requester.name?.[0] as HumanName)}`;
+  }
+  return `Ordered ${date}`;
+};
+
+const getAdditionalInfo = (item: ServiceRequest, activeTab: LabTab): string[] => {
+  const info: string[] = [];
+
+  if (activeTab === 'completed') {
+    // For completed items, show completion date instead of REQ #
+    const completionDate = item.meta?.lastUpdated ? formatDate(item.meta.lastUpdated) : 'Unknown date';
+    info.push(`Completed ${completionDate}`);
+  } else if (item.requisition?.value) {
+    // For open items, show REQ # as before
+    info.push(`REQ #${item.requisition.value}`);
+  }
+
+  return info;
+};

package/dist/examples/vintasend-medplum-example/src/components/labs/LabOrderDetails.module.css

@@ -0,0 +1,11 @@
+.button {
+  height: 32px;
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-gray-8));
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-gray-4));
+  font-weight: 500;
+}
+
+.selected {
+  background-color: light-dark(var(--mantine-color-black), var(--mantine-color-gray-6));
+  color: light-dark(var(--mantine-color-white), var(--mantine-color-white));
+}