vintasend 0.4.0 → 0.4.7

package/dist/examples/vintasend-medplum-example/src/components/tasks/encounter/TaskServiceRequest.tsx

@@ -0,0 +1,116 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import type { DiagnosticReport, Encounter, Reference, ServiceRequest, Task } from '@medplum/fhirtypes';
+import { useMedplum, useResource } from '@medplum/react';
+import { useEffect, useState } from 'react';
+import type { JSX } from 'react';
+import { Button, Group, Modal, Stack, Text, Title } from '@mantine/core';
+import { getDisplayString } from '@medplum/core';
+import { IconPlus } from '@tabler/icons-react';
+import { OrderLabsPage } from '../../../pages/labs/OrderLabsPage';
+import type { LabOrganization, TestCoding } from '@medplum/health-gorilla-core';
+import { showErrorNotification } from '../../../utils/notifications';
+
+interface TaskServiceRequestProps {
+  task: Task;
+  saveDiagnosticReport: (diagnosticReport: DiagnosticReport) => void;
+}
+
+const SNOMED_SYSTEM = 'http://snomed.info/sct';
+const SNOMED_DIAGNOSTIC_REPORT_CODE = '108252007';
+
+export const TaskServiceRequest = (props: TaskServiceRequestProps): JSX.Element => {
+  const { task } = props;
+  const medplum = useMedplum();
+  const serviceRequest = useResource(task.focus as Reference<ServiceRequest>);
+  const [newOrderModalOpened, setNewOrderModalOpened] = useState(false);
+  const [labServiceRequest, setLabServiceRequest] = useState<ServiceRequest | undefined>(undefined);
+  const performingLab: LabOrganization = {
+    resourceType: 'Organization',
+    id: '258a1dbb-ccec-4cb3-b9ff-4dc28f8f28a0',
+    name: 'HGDX LabCorp',
+    identifier: [
+      {
+        system: 'https://www.healthgorilla.com',
+        value: 'f-388554647b89801ea5e8320b',
+      },
+    ],
+  };
+
+  const tests: TestCoding[] | undefined = serviceRequest?.code?.coding
+    ?.filter((coding) => coding.system === SNOMED_SYSTEM && coding.code !== SNOMED_DIAGNOSTIC_REPORT_CODE)
+    .map((coding) => ({
+      system: 'urn:uuid:f:388554647b89801ea5e8320b',
+      code: coding.code,
+      display: coding.display,
+    })) as TestCoding[];
+
+  useEffect(() => {
+    const fetchServiceRequest = async (): Promise<void> => {
+      const serviceRequest = await medplum.readReference(task.focus as Reference<ServiceRequest>);
+      setLabServiceRequest(serviceRequest);
+    };
+    fetchServiceRequest().catch(showErrorNotification);
+  }, [medplum, task.focus]);
+
+  const handleNewOrderCreated = async (serviceRequest?: ServiceRequest): Promise<void> => {
+    setNewOrderModalOpened(false);
+    setLabServiceRequest(serviceRequest);
+  };
+
+  if (!serviceRequest) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <>
+      <Stack p={0}>
+        <Stack gap={0}>
+          <Title>{getDisplayString(task)}</Title>
+        </Stack>
+
+        {(labServiceRequest?.status === 'draft' || labServiceRequest?.status === 'on-hold') && (
+          <Group>
+            <Button onClick={() => setNewOrderModalOpened(true)} variant="outline" leftSection={<IconPlus size={16} />}>
+              Request Labs
+            </Button>
+          </Group>
+        )}
+
+        {task.for &&
+          labServiceRequest?.status !== 'draft' &&
+          labServiceRequest?.status !== 'on-hold' &&
+          labServiceRequest?.id && (
+            <>
+              <Text> ✅ Order Sent | Requisition: {labServiceRequest?.requisition?.value} </Text>
+              <Group>
+                <Button
+                  component="a"
+                  target="_blank"
+                  href={`/${task.for.reference}/ServiceRequest/${labServiceRequest.id}`}
+                >
+                  View in Labs
+                </Button>
+              </Group>
+            </>
+          )}
+      </Stack>
+
+      <Modal
+        opened={newOrderModalOpened}
+        onClose={() => setNewOrderModalOpened(false)}
+        size="xl"
+        centered
+        title="Order Labs"
+      >
+        <OrderLabsPage
+          encounter={task.encounter as Reference<Encounter>}
+          task={task as Reference<Task>}
+          tests={tests}
+          performingLab={performingLab}
+          onSubmitLabOrder={handleNewOrderCreated}
+        />
+      </Modal>
+    </>
+  );
+};

package/dist/examples/vintasend-medplum-example/src/components/tasks/encounter/TaskStatusPanel.module.css

@@ -0,0 +1,38 @@
+.completed {
+  background-color: var(--mantine-color-green-0) !important;
+}
+
+.ready {
+  background-color: var(--mantine-color-blue-0) !important;
+}
+
+.menu {
+  padding: 8px;
+  margin: -8px;
+  cursor: pointer;
+  display: flex;
+}
+
+.submenu {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  background: var(--mantine-color-white);
+  border: 1px solid var(--mantine-color-gray-3);
+  box-shadow: var(--mantine-shadow-md);
+  z-index: 1000;
+  min-width: 150px;
+}
+
+[data-mantine-color-scheme='dark'] .ready,
+[data-mantine-color-scheme='dark'] .completed {
+  color: var(--mantine-color-dark-8);
+}
+
+[data-mantine-color-scheme='dark'] .panel {
+  background-color: var(--mantine-color-dark-8);
+}
+
+[data-mantine-color-scheme='light'] .panel {
+  background-color: var(--mantine-color-gray-1);
+}

package/dist/examples/vintasend-medplum-example/src/components/tasks/encounter/TaskStatusPanel.test.tsx

@@ -0,0 +1,200 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { MantineProvider } from '@mantine/core';
+import type { Task } from '@medplum/fhirtypes';
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test, vi, beforeEach, afterEach } from 'vitest';
+import { TaskStatusPanel } from './TaskStatusPanel';
+
+const mockTask: Task = {
+  resourceType: 'Task',
+  id: 'task-123',
+  status: 'in-progress',
+  intent: 'order',
+};
+
+const mockOnActionButtonClicked = vi.fn();
+const mockOnChangeStatus = vi.fn();
+
+describe('TaskStatusPanel', () => {
+  let renderResult: ReturnType<typeof render> | null = null;
+
+  beforeEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+    renderResult = null;
+  });
+
+  afterEach(() => {
+    if (renderResult) {
+      renderResult.unmount();
+      renderResult = null;
+    }
+    cleanup();
+    vi.restoreAllMocks();
+  });
+
+  const setup = async (task: Task, enabled = true): Promise<void> => {
+    await act(async () => {
+      render(
+        <MantineProvider>
+          <TaskStatusPanel
+            task={task}
+            enabled={enabled}
+            onActionButtonClicked={mockOnActionButtonClicked}
+            onChangeStatus={mockOnChangeStatus}
+          />
+        </MantineProvider>
+      );
+    });
+  };
+
+  test('renders task status label', async () => {
+    await setup(mockTask);
+    expect(screen.getByText('Task Status:')).toBeInTheDocument();
+  });
+
+  test('renders formatted task status when enabled', async () => {
+    await setup(mockTask, true);
+    expect(screen.getByText('In Progress')).toBeInTheDocument();
+  });
+
+  test('renders formatted task status when disabled', async () => {
+    await setup(mockTask, false);
+    expect(screen.getByText('In Progress')).toBeInTheDocument();
+  });
+
+  test('shows edit button when enabled', async () => {
+    await setup(mockTask, true);
+    const editButton = screen.getByRole('button', { name: 'Edit Task' });
+    expect(editButton).toBeInTheDocument();
+  });
+
+  test('does not show edit button when disabled', async () => {
+    await setup(mockTask, false);
+    expect(screen.queryByRole('button', { name: 'Edit Task' })).not.toBeInTheDocument();
+  });
+
+  test('calls onActionButtonClicked when edit button is clicked', async () => {
+    const user = userEvent.setup();
+    await setup(mockTask, true);
+
+    const editButton = screen.getByRole('button', { name: 'Edit Task' });
+    await user.click(editButton);
+
+    expect(mockOnActionButtonClicked).toHaveBeenCalledTimes(1);
+  });
+
+  test('shows menu dropdown when badge is clicked', async () => {
+    const user = userEvent.setup();
+    await setup(mockTask, true);
+
+    const badge = screen.getAllByText('In Progress')[0];
+    await user.click(badge);
+
+    await waitFor(
+      () => {
+        const menuItems = screen.getAllByRole('menuitem');
+        expect(menuItems.length).toBe(5);
+      },
+      { timeout: 5000 }
+    );
+
+    expect(screen.getByText('Completed')).toBeInTheDocument();
+    expect(screen.getByText('Ready')).toBeInTheDocument();
+    expect(screen.getByText('On Hold')).toBeInTheDocument();
+    expect(screen.getByText('Cancelled')).toBeInTheDocument();
+  });
+
+  test('calls onChangeStatus when menu item is clicked', async () => {
+    const user = userEvent.setup();
+    await setup(mockTask, true);
+
+    const badge = screen.getByText('In Progress');
+    await user.click(badge);
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('Completed')).toBeInTheDocument();
+      },
+      { timeout: 5000 }
+    );
+
+    const completedItem = screen.getByText('Completed');
+    await user.click(completedItem);
+
+    expect(mockOnChangeStatus).toHaveBeenCalledWith('completed');
+  });
+
+  test('shows checkmark for current status in menu', async () => {
+    const user = userEvent.setup();
+    await setup(mockTask, true);
+
+    const badge = screen.getAllByText('In Progress')[0];
+    await user.click(badge);
+
+    let menuItems: HTMLElement[] = [];
+    await waitFor(
+      () => {
+        menuItems = screen.getAllByRole('menuitem');
+        expect(menuItems.length).toBeGreaterThan(0);
+        // Verify menu is visible by checking opacity or display style
+        const menuDropdown = document.querySelector('[role="menu"]');
+        if (menuDropdown) {
+          const style = window.getComputedStyle(menuDropdown);
+          expect(style.display).not.toBe('none');
+        }
+      },
+      { timeout: 5000 }
+    );
+
+    const inProgressItem = menuItems.find((item) => item.textContent?.includes('In Progress'));
+    expect(inProgressItem).toBeDefined();
+    // Check that the menu item has an SVG icon (IconCheck renders as SVG)
+    const icon = inProgressItem?.querySelector('svg');
+    expect(icon).toBeInTheDocument();
+  });
+
+  test('handles all status options in menu', async () => {
+    const user = userEvent.setup();
+    await setup(mockTask, true);
+
+    const badge = screen.getAllByText('In Progress')[0];
+    await user.click(badge);
+
+    await waitFor(
+      () => {
+        const menuItems = screen.getAllByRole('menuitem');
+        expect(menuItems.length).toBe(5);
+
+        const statusOptions = ['Completed', 'Ready', 'In Progress', 'On Hold', 'Cancelled'];
+        statusOptions.forEach((status) => {
+          const menuItem = menuItems.find((item) => item.textContent?.includes(status));
+          expect(menuItem).toBeInTheDocument();
+        });
+      },
+      { timeout: 5000 }
+    );
+  });
+
+  test('calls onChangeStatus with correct status for each menu item', async () => {
+    const user = userEvent.setup();
+    await setup(mockTask, true);
+
+    const badge = screen.getByText('In Progress');
+    await user.click(badge);
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('Ready')).toBeInTheDocument();
+      },
+      { timeout: 5000 }
+    );
+
+    const readyItem = screen.getByText('Ready');
+    await user.click(readyItem);
+
+    expect(mockOnChangeStatus).toHaveBeenCalledWith('ready');
+  });
+});

package/dist/examples/vintasend-medplum-example/src/components/tasks/encounter/TaskStatusPanel.tsx

@@ -0,0 +1,84 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Flex, Menu, Text, Box, Badge, ActionIcon, Tooltip } from '@mantine/core';
+import type { Task } from '@medplum/fhirtypes';
+import { IconChevronDown, IconPencil, IconCheck } from '@tabler/icons-react';
+import type { JSX } from 'react';
+
+interface TaskStatusPanelProps {
+  task: Task;
+  enabled?: boolean;
+  onActionButtonClicked: () => void;
+  onChangeStatus: (status: Task['status']) => void;
+}
+
+export const TaskStatusPanel = (props: TaskStatusPanelProps): JSX.Element => {
+  const { task, enabled = true, onActionButtonClicked, onChangeStatus } = props;
+  const badgeColor = getBadgeColor(task.status);
+
+  return (
+    <Box p="md" style={{ borderTop: '1px solid #eee', margin: 0 }}>
+      <Flex justify="space-between" align="center" w="100%" m={0}>
+        <Flex align="center" gap={8}>
+          <Text>Task Status:</Text>
+          {enabled ? (
+            <Menu position="bottom-start">
+              <Menu.Target>
+                <Badge
+                  variant="light"
+                  color={badgeColor}
+                  size="lg"
+                  style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 0 }}
+                  rightSection={<IconChevronDown size={16} />}
+                >
+                  {task.status.replaceAll('-', ' ').replaceAll(/\b\w/g, (char) => char.toUpperCase())}
+                </Badge>
+              </Menu.Target>
+              <Menu.Dropdown style={{ width: 140 }}>
+                {statuses.map((status) => (
+                  <Menu.Item
+                    key={status.value}
+                    rightSection={
+                      task.status === status.value ? (
+                        <div style={{ marginLeft: 4, display: 'flex', alignItems: 'center' }}>
+                          <IconCheck size={16} color="gray" />
+                        </div>
+                      ) : null
+                    }
+                    onClick={() => onChangeStatus(status.value as Task['status'])}
+                  >
+                    {status.label}
+                  </Menu.Item>
+                ))}
+              </Menu.Dropdown>
+            </Menu>
+          ) : (
+            <Badge variant="light" color={badgeColor} size="lg">
+              {task.status.replaceAll('-', ' ').replaceAll(/\b\w/g, (char) => char.toUpperCase())}
+            </Badge>
+          )}
+        </Flex>
+        {enabled && (
+          <Tooltip label="Edit Task" openDelay={500}>
+            <ActionIcon onClick={onActionButtonClicked} color="gray" variant="subtle" aria-label="Edit Task" size="lg">
+              <IconPencil size={20} />
+            </ActionIcon>
+          </Tooltip>
+        )}
+      </Flex>
+    </Box>
+  );
+};
+
+const statuses = [
+  { value: 'completed', label: 'Completed' },
+  { value: 'ready', label: 'Ready' },
+  { value: 'in-progress', label: 'In Progress' },
+  { value: 'on-hold', label: 'On Hold' },
+  { value: 'cancelled', label: 'Cancelled' },
+];
+
+const getBadgeColor = (status: Task['status']): string => {
+  const colors = { completed: 'green', cancelled: 'red' };
+  return colors[status as keyof typeof colors] ?? 'blue';
+};

package/dist/examples/vintasend-medplum-example/src/components/utils.test.ts

@@ -0,0 +1,176 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import type { ProjectMembership } from '@medplum/fhirtypes';
+import { describe, expect, test } from 'vitest';
+import { hasDoseSpotIdentifier } from './utils';
+
+describe('utils', () => {
+  describe('hasDoseSpotIdentifier', () => {
+    test('returns true when membership has DoseSpot identifier', () => {
+      const membership: ProjectMembership = {
+        resourceType: 'ProjectMembership',
+        id: 'membership-1',
+        identifier: [
+          {
+            system: 'http://dosespot.com/identifier',
+            value: 'dosespot-user-123',
+          },
+        ],
+        project: { id: 'project-1' },
+        user: { id: 'user-1' },
+        profile: { id: 'profile-1' },
+      };
+
+      expect(hasDoseSpotIdentifier(membership)).toBe(true);
+    });
+
+    test('returns false when identifier system contains "DOSESPOT" in uppercase (case-sensitive)', () => {
+      const membership: ProjectMembership = {
+        resourceType: 'ProjectMembership',
+        id: 'membership-1',
+        identifier: [
+          {
+            system: 'http://DOSESPOT.COM/identifier',
+            value: 'user-123',
+          },
+        ],
+        project: { id: 'project-1' },
+        user: { id: 'user-1' },
+        profile: { id: 'profile-1' },
+      };
+
+      expect(hasDoseSpotIdentifier(membership)).toBe(false);
+    });
+
+    test('returns true when identifier system contains "dosespot" as substring', () => {
+      const membership: ProjectMembership = {
+        resourceType: 'ProjectMembership',
+        id: 'membership-1',
+        identifier: [
+          {
+            system: 'http://example.com/dosespot-integration/user',
+            value: 'user-123',
+          },
+        ],
+        project: { id: 'project-1' },
+        user: { id: 'user-1' },
+        profile: { id: 'profile-1' },
+      };
+
+      expect(hasDoseSpotIdentifier(membership)).toBe(true);
+    });
+
+    test('returns false when membership has no DoseSpot identifier', () => {
+      const membership: ProjectMembership = {
+        resourceType: 'ProjectMembership',
+        id: 'membership-1',
+        identifier: [
+          {
+            system: 'http://example.com/identifier',
+            value: 'user-123',
+          },
+        ],
+        project: { id: 'project-1' },
+        user: { id: 'user-1' },
+        profile: { id: 'profile-1' },
+      };
+
+      expect(hasDoseSpotIdentifier(membership)).toBe(false);
+    });
+
+    test('returns false when membership has no identifiers', () => {
+      const membership: ProjectMembership = {
+        resourceType: 'ProjectMembership',
+        id: 'membership-1',
+        project: { id: 'project-1' },
+        user: { id: 'user-1' },
+        profile: { id: 'profile-1' },
+      };
+
+      expect(hasDoseSpotIdentifier(membership)).toBe(false);
+    });
+
+    test('returns false when membership is undefined', () => {
+      expect(hasDoseSpotIdentifier(undefined)).toBe(false);
+    });
+
+    test('returns false when identifier array is empty', () => {
+      const membership: ProjectMembership = {
+        resourceType: 'ProjectMembership',
+        id: 'membership-1',
+        identifier: [],
+        project: { id: 'project-1' },
+        user: { id: 'user-1' },
+        profile: { id: 'profile-1' },
+      };
+
+      expect(hasDoseSpotIdentifier(membership)).toBe(false);
+    });
+
+    test('returns true when one of multiple identifiers contains "dosespot"', () => {
+      const membership: ProjectMembership = {
+        resourceType: 'ProjectMembership',
+        id: 'membership-1',
+        identifier: [
+          {
+            system: 'http://example.com/identifier',
+            value: 'user-123',
+          },
+          {
+            system: 'http://dosespot.com/user',
+            value: 'dosespot-user-123',
+          },
+          {
+            system: 'http://other.com/identifier',
+            value: 'other-123',
+          },
+        ],
+        project: { id: 'project-1' },
+        user: { id: 'user-1' },
+        profile: { id: 'profile-1' },
+      };
+
+      expect(hasDoseSpotIdentifier(membership)).toBe(true);
+    });
+
+    test('handles identifier with undefined system', () => {
+      const membership: ProjectMembership = {
+        resourceType: 'ProjectMembership',
+        id: 'membership-1',
+        identifier: [
+          {
+            system: undefined,
+            value: 'user-123',
+          },
+          {
+            system: 'http://dosespot.com/user',
+            value: 'dosespot-user-123',
+          },
+        ],
+        project: { id: 'project-1' },
+        user: { id: 'user-1' },
+        profile: { id: 'profile-1' },
+      };
+
+      expect(hasDoseSpotIdentifier(membership)).toBe(true);
+    });
+
+    test('handles identifier with null system', () => {
+      const membership: ProjectMembership = {
+        resourceType: 'ProjectMembership',
+        id: 'membership-1',
+        identifier: [
+          {
+            system: null as any,
+            value: 'user-123',
+          },
+        ],
+        project: { id: 'project-1' },
+        user: { id: 'user-1' },
+        profile: { id: 'profile-1' },
+      };
+
+      expect(hasDoseSpotIdentifier(membership)).toBe(false);
+    });
+  });
+});

package/dist/examples/vintasend-medplum-example/src/components/utils.ts

@@ -0,0 +1,17 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import type { ProjectMembership } from '@medplum/fhirtypes';
+
+/**
+ * Returns true if the profile has a DoseSpot identifier.
+ *
+ * This is a crude approximation for demonstration purposes.
+ *
+ * In your application, you may want to make this distinction based on user groups, access control lists, etc.
+ *
+ * @param membership - The current user's project membership.
+ * @returns True if the profile has a DoseSpot identifier.
+ */
+export function hasDoseSpotIdentifier(membership: ProjectMembership | undefined): boolean {
+  return !!membership?.identifier?.some((i) => i.system?.includes('dosespot'));
+}

package/dist/examples/vintasend-medplum-example/src/config/constants.ts

@@ -0,0 +1,3 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+export const SAVE_TIMEOUT_MS = 1500;