vintasend 0.4.0 → 0.4.7

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

@@ -0,0 +1,224 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { ActionIcon, Box, Button, Flex, Group, Menu, Modal, Paper, SegmentedControl, Stack, Text } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { formatDate, formatHumanName } from '@medplum/core';
+import type { Encounter, Practitioner, Reference } from '@medplum/fhirtypes';
+import { IconChevronDown, IconLock, IconLockOpen } from '@tabler/icons-react';
+import type { JSX } from 'react';
+import { useState } from 'react';
+import { ChartNoteStatus } from '../../types/encounter';
+import { SignLockDialog } from './SignLockDialog';
+
+interface EncounterHeaderProps {
+  encounter: Encounter;
+  practitioner?: Practitioner | undefined;
+  chartNoteStatus?: ChartNoteStatus;
+  onStatusChange?: (status: Encounter['status']) => void;
+  onTabChange?: (tab: string) => void;
+  onSign?: (practitioner: Reference<Practitioner>, lock: boolean) => void;
+  onSignLock?: (practitioner: Reference<Practitioner>) => void;
+}
+
+export const EncounterHeader = (props: EncounterHeaderProps): JSX.Element => {
+  const {
+    encounter,
+    practitioner,
+    chartNoteStatus = ChartNoteStatus.Unsigned,
+    onStatusChange,
+    onTabChange,
+    onSign,
+  } = props;
+  const [status, setStatus] = useState<Encounter['status']>(encounter.status);
+  const [activeTab, setActiveTab] = useState<string>('notes');
+  const [confirmOpened, { open: openConfirm, close: closeConfirm }] = useDisclosure(false);
+  const [signOpened, { open: openSign, close: closeSign }] = useDisclosure(false);
+
+  const handleStatusChange = (newStatus: Encounter['status']): void => {
+    if (newStatus === 'cancelled') {
+      openConfirm();
+      return;
+    }
+
+    setStatus(newStatus);
+    onStatusChange?.(newStatus);
+  };
+
+  const confirmStatusChange = (): void => {
+    setStatus('cancelled');
+    onStatusChange?.('cancelled');
+    closeConfirm();
+  };
+
+  const onConfirmSign = (practitioner: Reference<Practitioner>, lock: boolean): void => {
+    onSign?.(practitioner, lock);
+    closeSign();
+  };
+
+  const handleTabChange = (tab: string): void => {
+    setActiveTab(tab);
+    onTabChange?.(tab);
+  };
+
+  const handleSign = (): void => {
+    if (chartNoteStatus === ChartNoteStatus.SignedAndLocked) {
+      return;
+    }
+    openSign();
+  };
+
+  const practitionerName = practitioner?.name?.[0] ? formatHumanName(practitioner.name[0]) : 'Unknown Provider';
+  const formattedDate = formatDate(encounter.period?.start);
+  const encounterDetail = formattedDate ? `${formattedDate} · ${practitionerName}` : practitionerName;
+
+  const renderMenuItems = (): JSX.Element | null => {
+    if (status === 'planned') {
+      return (
+        <>
+          <Menu.Item onClick={() => handleStatusChange('arrived')}>Arrived</Menu.Item>
+          <Menu.Item onClick={() => handleStatusChange('in-progress')}>In Progress</Menu.Item>
+          <Menu.Item onClick={() => handleStatusChange('finished')}>Finished</Menu.Item>
+          <Menu.Item onClick={() => handleStatusChange('cancelled')}>Cancelled</Menu.Item>
+          <Menu.Divider />
+        </>
+      );
+    }
+
+    if (status === 'arrived') {
+      return (
+        <>
+          <Menu.Item onClick={() => handleStatusChange('in-progress')}>In Progress</Menu.Item>
+          <Menu.Item onClick={() => handleStatusChange('finished')}>Finished</Menu.Item>
+          <Menu.Item onClick={() => handleStatusChange('cancelled')}>Cancelled</Menu.Item>
+          <Menu.Divider />
+        </>
+      );
+    }
+
+    if (status === 'in-progress') {
+      return (
+        <>
+          <Menu.Item onClick={() => handleStatusChange('finished')}>Finished</Menu.Item>
+          <Menu.Item onClick={() => handleStatusChange('cancelled')}>Cancelled</Menu.Item>
+        </>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <>
+      <Paper shadow="sm" p={0}>
+        <Flex justify="space-between" align="center" p="lg">
+          <Stack gap={0}>
+            <Text fw={800} size="lg">
+              {encounter.basedOn?.[0]?.display || 'Visit'}
+            </Text>
+            <Text fw={500} size="xs" c="dimmed">
+              {encounterDetail}
+            </Text>
+          </Stack>
+          <Group>
+            {status === 'cancelled' || status === 'finished' ? (
+              <>
+                {status === 'finished' && chartNoteStatus === ChartNoteStatus.Unsigned && (
+                  <ActionIcon radius="50%" variant={'outline'} color={'gray'} onClick={handleSign}>
+                    <IconLock size={16} />
+                  </ActionIcon>
+                )}
+
+                {status === 'finished' && chartNoteStatus === ChartNoteStatus.Signed && (
+                  <ActionIcon radius="50%" variant={'outline'} color={'gray'} onClick={handleSign}>
+                    <IconLockOpen size={16} />
+                  </ActionIcon>
+                )}
+
+                {status === 'finished' && chartNoteStatus === ChartNoteStatus.SignedAndLocked && (
+                  <ActionIcon radius="50%" variant={'filled'} color={'blue'} onClick={handleSign}>
+                    <IconLock size={16} />
+                  </ActionIcon>
+                )}
+
+                <Button variant="light" color={getStatusColor(status)} radius="xl" size="sm">
+                  {getStatusDisplay(status)}
+                </Button>
+              </>
+            ) : (
+              <Menu position="bottom-end" shadow="md">
+                <Menu.Target>
+                  <Button
+                    variant="light"
+                    color={getStatusColor(status)}
+                    rightSection={<IconChevronDown size={16} />}
+                    radius="xl"
+                    size="sm"
+                  >
+                    {getStatusDisplay(status)}
+                  </Button>
+                </Menu.Target>
+
+                <Menu.Dropdown>{renderMenuItems()}</Menu.Dropdown>
+              </Menu>
+            )}
+          </Group>
+        </Flex>
+
+        <Box px="md" pb="md">
+          <SegmentedControl
+            value={activeTab}
+            onChange={(value: string) => handleTabChange(value)}
+            data={[
+              { label: 'Note & Tasks', value: 'notes' },
+              { label: 'Details & Billing', value: 'details' },
+            ]}
+            fullWidth
+            radius="md"
+            size="md"
+          />
+        </Box>
+      </Paper>
+
+      <Modal opened={confirmOpened} onClose={closeConfirm}>
+        <Text size="lg" fw={500}>
+          Are you sure you want to cancel this encounter?
+        </Text>
+        <Text size="sm" c="dimmed" mt="xs">
+          This action cannot be undone.
+        </Text>
+        <Group justify="flex-end" mt="xl" gap="xs">
+          <Button onClick={closeConfirm} color="red" variant="outline">
+            No, keep it
+          </Button>
+          <Button onClick={confirmStatusChange} color="red">
+            Yes, cancel it
+          </Button>
+        </Group>
+      </Modal>
+
+      <Modal opened={signOpened} onClose={closeSign} title="Signing As">
+        <SignLockDialog onSign={onConfirmSign} />
+      </Modal>
+    </>
+  );
+};
+
+const getStatusColor = (status: Encounter['status']): string => {
+  if (status === 'finished') {
+    return 'green';
+  }
+  if (status === 'cancelled') {
+    return 'red';
+  }
+  if (status === 'arrived' || status === 'in-progress' || status === 'planned') {
+    return 'blue';
+  }
+  return 'gray';
+};
+
+const getStatusDisplay = (status: Encounter['status']): string => {
+  return status
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};

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

@@ -0,0 +1,255 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { MantineProvider } from '@mantine/core';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MedplumProvider } from '@medplum/react';
+import type { Encounter, Provenance } from '@medplum/fhirtypes';
+import { MockClient } from '@medplum/mock';
+import { MemoryRouter } from 'react-router';
+import { describe, expect, test, beforeEach, vi } from 'vitest';
+import { SignAddendum } from './SignAddendum';
+import { ChartNoteStatus } from '../../types/encounter';
+import * as notifications from '../../utils/notifications';
+
+const mockEncounter: Encounter = {
+  resourceType: 'Encounter',
+  id: 'encounter-123',
+  status: 'finished',
+  class: { code: 'AMB', system: 'http://terminology.hl7.org/CodeSystem/v3-ActCode' },
+  subject: { reference: 'Patient/patient-123' },
+};
+
+const mockProvenance: Provenance = {
+  resourceType: 'Provenance',
+  id: 'provenance-123',
+  target: [{ reference: 'Encounter/encounter-123' }],
+  recorded: '2024-01-01T10:00:00Z',
+  agent: [
+    {
+      who: { reference: 'Practitioner/practitioner-123', display: 'Dr. Test' },
+    },
+  ],
+};
+
+describe('SignAddendumCard', () => {
+  let medplum: MockClient;
+
+  beforeEach(async () => {
+    medplum = new MockClient();
+    vi.clearAllMocks();
+  });
+
+  const setup = (props: Partial<Parameters<typeof SignAddendum>[0]> = {}): ReturnType<typeof render> => {
+    return render(
+      <MemoryRouter>
+        <MedplumProvider medplum={medplum}>
+          <MantineProvider>
+            <SignAddendum
+              encounter={mockEncounter}
+              provenances={[]}
+              chartNoteStatus={ChartNoteStatus.Unsigned}
+              {...props}
+            />
+          </MantineProvider>
+        </MedplumProvider>
+      </MemoryRouter>
+    );
+  };
+
+  test('returns null when no provenances', async () => {
+    await act(async () => {
+      const { container } = setup({ provenances: [] });
+      await waitFor(() => {
+        expect(container.firstChild).toBeNull();
+      });
+    });
+  });
+
+  test('renders provenance information', async () => {
+    await act(async () => {
+      setup({ provenances: [mockProvenance] });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/Signed by/i)).toBeInTheDocument();
+      expect(screen.getByText(/Dr\. Test/i)).toBeInTheDocument();
+    });
+  });
+
+  test('displays signed and locked status for last provenance', async () => {
+    await act(async () => {
+      setup({
+        provenances: [mockProvenance],
+        chartNoteStatus: ChartNoteStatus.SignedAndLocked,
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/Signed and Locked by/i)).toBeInTheDocument();
+    });
+  });
+
+  test('displays addendum form', async () => {
+    await act(async () => {
+      setup({ provenances: [mockProvenance] });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('Add an addendum to this Visit...')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Add Addendum' })).toBeInTheDocument();
+    });
+  });
+
+  test('creates addendum when form is submitted', async () => {
+    const user = userEvent.setup();
+    const createResourceSpy = vi.spyOn(medplum, 'createResource').mockResolvedValue({
+      resourceType: 'DocumentReference',
+      id: 'doc-new',
+      status: 'current',
+      date: new Date().toISOString(),
+      author: [{ display: 'Dr. Alice Smith' }],
+    } as any);
+
+    await act(async () => {
+      setup({ provenances: [mockProvenance] });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('Add an addendum to this Visit...')).toBeInTheDocument();
+    });
+
+    const textarea = screen.getByPlaceholderText('Add an addendum to this Visit...');
+    await user.type(textarea, 'Test addendum text');
+
+    const submitButton = screen.getByRole('button', { name: 'Add Addendum' });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(createResourceSpy).toHaveBeenCalled();
+    });
+  });
+
+  test('disables submit button when textarea is empty', async () => {
+    await act(async () => {
+      setup({ provenances: [mockProvenance] });
+    });
+
+    await waitFor(() => {
+      const submitButton = screen.getByRole('button', { name: 'Add Addendum' });
+      expect(submitButton).toBeInTheDocument();
+    });
+
+    const submitButton = screen.getByRole('button', { name: 'Add Addendum' });
+    expect(submitButton).toBeDisabled();
+  });
+
+  test('disables submit button when only whitespace', async () => {
+    const user = userEvent.setup();
+    await act(async () => {
+      setup({ provenances: [mockProvenance] });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('Add an addendum to this Visit...')).toBeInTheDocument();
+    });
+
+    const textarea = screen.getByPlaceholderText('Add an addendum to this Visit...');
+    await user.type(textarea, '   ');
+
+    await waitFor(() => {
+      const submitButton = screen.getByRole('button', { name: 'Add Addendum' });
+      expect(submitButton).toBeDisabled();
+    });
+  });
+
+  test('loads and displays addendums from DocumentReference', async () => {
+    const mockDocumentReference = {
+      resourceType: 'DocumentReference' as const,
+      id: 'doc-123',
+      status: 'current' as const,
+      date: '2024-01-02T10:00:00Z',
+      author: [{ display: 'Dr. Author' }],
+      content: [
+        {
+          attachment: {
+            contentType: 'text/plain',
+            data: btoa('Test addendum content'),
+          },
+        },
+      ],
+    };
+
+    vi.spyOn(medplum, 'searchResources').mockResolvedValue([mockDocumentReference] as any);
+
+    await act(async () => {
+      setup({ provenances: [mockProvenance] });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/Addendum by/i)).toBeInTheDocument();
+      expect(screen.getByText('Test addendum content')).toBeInTheDocument();
+    });
+  });
+
+  test('handles errors when loading addendums', async () => {
+    const error = new Error('Failed to load addendums');
+    vi.spyOn(medplum, 'searchResources').mockRejectedValue(error);
+    const errorNotificationSpy = vi.spyOn(notifications, 'showErrorNotification');
+
+    await act(async () => {
+      setup({ provenances: [mockProvenance] });
+    });
+
+    await waitFor(() => {
+      expect(errorNotificationSpy).toHaveBeenCalledWith(error);
+    });
+  });
+
+  test('handles errors when creating addendum', async () => {
+    const user = userEvent.setup();
+    const error = new Error('Failed to create addendum');
+    vi.spyOn(medplum, 'createResource').mockRejectedValue(error);
+    const errorNotificationSpy = vi.spyOn(notifications, 'showErrorNotification');
+
+    await act(async () => {
+      setup({ provenances: [mockProvenance] });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('Add an addendum to this Visit...')).toBeInTheDocument();
+    });
+
+    const textarea = screen.getByPlaceholderText('Add an addendum to this Visit...');
+    await user.type(textarea, 'Test addendum');
+
+    const submitButton = screen.getByRole('button', { name: 'Add Addendum' });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(errorNotificationSpy).toHaveBeenCalledWith(error);
+    });
+  });
+
+  test('displays multiple provenances', async () => {
+    const provenance2: Provenance = {
+      ...mockProvenance,
+      id: 'provenance-456',
+      recorded: '2024-01-02T10:00:00Z',
+      agent: [
+        {
+          who: { reference: 'Practitioner/practitioner-456', display: 'Dr. Another' },
+        },
+      ],
+    };
+
+    await act(async () => {
+      setup({ provenances: [mockProvenance, provenance2] });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/Dr\. Test/i)).toBeInTheDocument();
+      expect(screen.getByText(/Dr\. Another/i)).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,212 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Card, Stack, Text, Group, Textarea, Button, Divider } from '@mantine/core';
+import { IconLock, IconPencil, IconSignature } from '@tabler/icons-react';
+import type { Provenance, Encounter } from '@medplum/fhirtypes';
+import { useMedplum, useMedplumProfile } from '@medplum/react';
+import { useEffect, useState } from 'react';
+import type { JSX } from 'react';
+import { ChartNoteStatus } from '../../types/encounter';
+import { createReference, formatDate } from '@medplum/core';
+import { showErrorNotification } from '../../utils/notifications';
+
+interface SignAddendumProps {
+  provenances: Provenance[];
+  chartNoteStatus: ChartNoteStatus;
+  encounter: Encounter;
+}
+
+interface ProvenanceDisplay {
+  practitionerName: string;
+  timestamp: string;
+}
+
+interface AddendumDisplay {
+  authorName: string;
+  timestamp: string;
+  text: string;
+}
+
+export const SignAddendum = ({ provenances, chartNoteStatus, encounter }: SignAddendumProps): JSX.Element | null => {
+  const medplum = useMedplum();
+  const author = useMedplumProfile();
+  const authorReference = author ? createReference(author) : undefined;
+  const [provenanceDisplays, setProvenanceDisplays] = useState<ProvenanceDisplay[]>([]);
+  const [addendumDisplays, setAddendumDisplays] = useState<AddendumDisplay[]>([]);
+  const [addendumText, setAddendumText] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  useEffect(() => {
+    const loadProvenanceData = async (): Promise<void> => {
+      const displays: ProvenanceDisplay[] = provenances.map((prov) => ({
+        practitionerName: prov.agent?.[0]?.who?.display || 'Unknown Practitioner',
+        timestamp: formatDate(prov.recorded),
+      }));
+      setProvenanceDisplays(displays);
+    };
+    loadProvenanceData().catch(showErrorNotification);
+  }, [provenances, medplum]);
+
+  useEffect(() => {
+    const loadAddendums = async (): Promise<void> => {
+      try {
+        const bundle = await medplum.searchResources('DocumentReference', {
+          encounter: `Encounter/${encounter.id}`,
+          type: '55107-7', // LOINC code for Addendum Document
+          _sort: '-date',
+        });
+
+        const displays: AddendumDisplay[] = bundle.map((doc) => {
+          const authorName = doc.author?.[0]?.display || 'Unknown Author';
+          const timestamp = doc.date ? formatDate(doc.date) : 'Unknown Date';
+          const encodedText = doc.content?.[0]?.attachment?.data;
+          const text = encodedText ? atob(encodedText) : '';
+
+          return {
+            authorName,
+            timestamp,
+            text,
+          };
+        });
+        setAddendumDisplays(displays);
+      } catch (error) {
+        showErrorNotification(error);
+      }
+    };
+
+    if (encounter.id) {
+      loadAddendums().catch(console.error);
+    }
+  }, [encounter.id, medplum]);
+
+  const handleAddAddendum = async (): Promise<void> => {
+    setIsSubmitting(true);
+    try {
+      const documentReference = await medplum.createResource({
+        resourceType: 'DocumentReference',
+        status: 'current',
+        type: {
+          coding: [
+            {
+              system: 'http://loinc.org',
+              code: '55107-7',
+              display: 'Addendum Document',
+            },
+          ],
+        },
+        subject: encounter.subject,
+        author: [
+          {
+            reference: authorReference?.reference,
+            display: authorReference?.display,
+          },
+        ],
+        context: {
+          encounter: [
+            {
+              reference: `Encounter/${encounter.id}`,
+            },
+          ],
+        },
+        date: new Date().toISOString(),
+        content: [
+          {
+            attachment: {
+              contentType: 'text/plain',
+              data: btoa(addendumText),
+              title: 'Addendum',
+            },
+          },
+        ],
+      });
+
+      setAddendumDisplays([
+        ...addendumDisplays,
+        {
+          authorName: authorReference?.display || 'Unknown Author',
+          timestamp: formatDate(documentReference.date),
+          text: addendumText,
+        },
+      ]);
+      setAddendumText('');
+    } catch (error) {
+      showErrorNotification(error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (provenanceDisplays.length === 0) {
+    return null;
+  }
+
+  return (
+    <Card withBorder shadow="sm">
+      <Stack gap="md">
+        {provenanceDisplays.map((display, index) => (
+          <Stack key={`prov-${index}`}>
+            <Group gap="sm">
+              {provenanceDisplays.length - 1 === index && chartNoteStatus === ChartNoteStatus.SignedAndLocked ? (
+                <IconLock size={20} />
+              ) : (
+                <IconSignature size={20} />
+              )}
+              <Text fw={500}>
+                {provenanceDisplays.length - 1 === index && chartNoteStatus === ChartNoteStatus.SignedAndLocked
+                  ? 'Signed and Locked by '
+                  : 'Signed by '}
+                {display.practitionerName}
+              </Text>
+              <Text c="dimmed" size="sm">
+                {display.timestamp}
+              </Text>
+            </Group>
+            <Divider />
+          </Stack>
+        ))}
+
+        {addendumDisplays.map((addendum, index) => (
+          <Stack key={`addendum-${index}`}>
+            <Group gap="sm" align="flex-start">
+              <IconPencil size={20} />
+              <Stack gap="xs" style={{ flex: 1 }}>
+                <Group gap="sm">
+                  <Text fw={500}>Addendum by {addendum.authorName}</Text>
+                  <Text c="dimmed" size="sm">
+                    {addendum.timestamp}
+                  </Text>
+                </Group>
+                <Text size="sm" style={{ whiteSpace: 'pre-wrap' }}>
+                  {addendum.text}
+                </Text>
+              </Stack>
+            </Group>
+            <Divider />
+          </Stack>
+        ))}
+
+        <Text fw={600} mt="sm">
+          Add Addendum
+        </Text>
+        <Textarea
+          placeholder="Add an addendum to this Visit..."
+          value={addendumText}
+          onChange={(e) => setAddendumText(e.target.value)}
+          autosize
+          minRows={3}
+          maxRows={6}
+        />
+        <Group justify="flex-end">
+          <Button
+            leftSection={<IconPencil size={16} />}
+            onClick={handleAddAddendum}
+            disabled={!addendumText.trim() || isSubmitting}
+            loading={isSubmitting}
+          >
+            Add Addendum
+          </Button>
+        </Group>
+      </Stack>
+    </Card>
+  );
+};