vintasend 0.4.0 → 0.4.7

package/dist/examples/vintasend-medplum-example/src/components/messages/ThreadInbox.tsx

@@ -0,0 +1,358 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+  Flex,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+  ActionIcon,
+  Divider,
+  Button,
+  Center,
+  ThemeIcon,
+  Menu,
+  Skeleton,
+  Box,
+  Pagination,
+  Group,
+} from '@mantine/core';
+import type { Communication, Patient, Practitioner, Reference } from '@medplum/fhirtypes';
+import { PatientSummary, ThreadChat } from '@medplum/react';
+import { useCallback, useEffect, useMemo } from 'react';
+import type { JSX } from 'react';
+import { IconMessageCircle, IconChevronDown, IconPlus } from '@tabler/icons-react';
+import { getReferenceString, Operator, parseSearchRequest } from '@medplum/core';
+import type { SearchRequest } from '@medplum/core';
+import { ChatList } from './ChatList';
+import { NewTopicDialog } from './NewTopicDialog';
+import { ParticipantFilter } from './ParticipantFilter';
+import { useThreadInbox } from '../../hooks/useThreadInbox';
+import classes from './ThreadInbox.module.css';
+import { useDisclosure } from '@mantine/hooks';
+import { showErrorNotification } from '../../utils/notifications';
+import cx from 'clsx';
+import { Link } from 'react-router';
+
+/**
+ * ThreadInbox is a component that displays a list of threads and allows the user to select a thread to view.
+ * @param query - The query to fetch all communications.
+ * @param threadId - The id of the thread to select.
+ * @param subject - The default subject when creating a new thread.
+ * @param showPatientSummary - Whether to show the patient summary.
+ * @param onNew - A function to handle a new thread.
+ * @param getThreadUri - A function to build thread URIs.
+ * @param onChange - A function to handle search changes.
+ * @param inProgressUri - The URI for in-progress threads.
+ * @param completedUri - The URI for completed threads.
+ */
+
+interface ThreadInboxProps {
+  query: string;
+  threadId: string | undefined;
+  subject?: Reference<Patient> | Patient | undefined;
+  showPatientSummary?: boolean | undefined;
+  onNew: (message: Communication) => void;
+  getThreadUri: (topic: Communication) => string;
+  onChange: (search: SearchRequest) => void;
+  inProgressUri: string;
+  completedUri: string;
+}
+
+export function ThreadInbox(props: ThreadInboxProps): JSX.Element {
+  const {
+    query,
+    threadId,
+    subject,
+    showPatientSummary = false,
+    onNew,
+    getThreadUri,
+    onChange,
+    inProgressUri,
+    completedUri,
+  } = props;
+
+  const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
+
+  const currentSearch = useMemo(() => parseSearchRequest(`Communication?${query}`), [query]);
+
+  const searchParams = useMemo(() => new URLSearchParams(query), [query]);
+  const itemsPerPage = Number.parseInt(searchParams.get('_count') || '20', 10);
+  const currentOffset = Number.parseInt(searchParams.get('_offset') || '0', 10);
+  const currentPage = Math.floor(currentOffset / itemsPerPage) + 1;
+  const status = (searchParams.get('status') as Communication['status']) || 'in-progress';
+
+  // Extract participants from parsed search request filters (comma-separated)
+  const selectedParticipants = useMemo((): Reference<Patient | Practitioner>[] => {
+    const recipientFilters = currentSearch.filters?.filter((f) => f.code === 'recipient') ?? [];
+    // Split comma-separated values and flatten
+    return recipientFilters.flatMap((f) =>
+      f.value
+        .split(',')
+        .filter(Boolean)
+        .map((ref) => ({ reference: ref }) as Reference<Patient | Practitioner>)
+    );
+  }, [currentSearch]);
+
+  const {
+    loading,
+    error,
+    threadMessages,
+    selectedThread,
+    total,
+    handleThreadStatusChange,
+    addThreadMessage,
+    refreshThreadMessages,
+  } = useThreadInbox({
+    query,
+    threadId,
+  });
+
+  const handleParticipantsChange = useCallback(
+    (participants: Reference<Patient | Practitioner>[]) => {
+      // Remove existing recipient filters
+      const otherFilters = currentSearch.filters?.filter((f) => f.code !== 'recipient') ?? [];
+
+      // Add recipient filter with comma-separated values (OR logic in FHIR)
+      const participantRefs = participants.map((p) => p.reference).filter(Boolean) as string[];
+      const newFilters =
+        participantRefs.length > 0
+          ? [...otherFilters, { code: 'recipient', operator: Operator.EQUALS, value: participantRefs.join(',') }]
+          : otherFilters;
+
+      onChange({
+        ...currentSearch,
+        filters: newFilters,
+        offset: 0, // Reset to first page when filter changes
+      });
+    },
+    [currentSearch, onChange]
+  );
+
+  useEffect(() => {
+    if (error) {
+      showErrorNotification(error);
+    }
+  }, [error]);
+
+  const handleTopicStatusChangeWithErrorHandling = async (newStatus: Communication['status']): Promise<void> => {
+    try {
+      await handleThreadStatusChange(newStatus);
+      await refreshThreadMessages();
+    } catch (error) {
+      showErrorNotification(error);
+    }
+  };
+
+  const handleNewTopicCompletion = (message: Communication): void => {
+    addThreadMessage(message);
+    onNew(message);
+  };
+
+  const skeletonTitleWidths = [80, 72, 68, 64];
+  const skeletonSubtitleWidths = [85, 78, 70, 60];
+
+  return (
+    <>
+      <div className={classes.container}>
+        <Flex direction="row" h="100%" w="100%">
+          {/* Left sidebar - Messages list */}
+          <Flex direction="column" w={380} h="100%" className={classes.rightBorder}>
+            <Paper h="100%" style={{ display: 'flex', flexDirection: 'column' }}>
+              <ScrollArea style={{ flex: 1 }} scrollbarSize={10} type="hover" scrollHideDelay={250}>
+                <Flex h={64} align="center" justify="space-between" p="md">
+                  <Group gap="xs">
+                    <Button
+                      component={Link}
+                      to={inProgressUri}
+                      className={cx(classes.button, { [classes.selected]: status === 'in-progress' })}
+                      h={32}
+                      radius="xl"
+                    >
+                      In progress
+                    </Button>
+                    <Button
+                      component={Link}
+                      to={completedUri}
+                      className={cx(classes.button, { [classes.selected]: status === 'completed' })}
+                      h={32}
+                      radius="xl"
+                    >
+                      Completed
+                    </Button>
+                    <ParticipantFilter
+                      selectedParticipants={selectedParticipants}
+                      onFilterChange={handleParticipantsChange}
+                    />
+                  </Group>
+                  <ActionIcon radius="50%" variant="filled" color="blue" onClick={openModal}>
+                    <IconPlus size={16} />
+                  </ActionIcon>
+                </Flex>
+                <Divider />
+                {loading ? (
+                  <Stack gap="md" p="md">
+                    {Array.from({ length: 10 }).map((_, index) => {
+                      const titleWidth = skeletonTitleWidths[index % skeletonTitleWidths.length];
+                      const subtitleWidth = skeletonSubtitleWidths[index % skeletonSubtitleWidths.length];
+                      return (
+                        <Flex key={index} gap="sm" align="flex-start">
+                          <Skeleton height={40} width={40} radius="50%" />
+                          <Box style={{ flex: 1 }}>
+                            <Flex direction="column" gap="xs">
+                              <Skeleton height={16} width={`${titleWidth}%`} />
+                              <Skeleton height={14} width={`${subtitleWidth}%`} />
+                            </Flex>
+                          </Box>
+                        </Flex>
+                      );
+                    })}
+                  </Stack>
+                ) : (
+                  threadMessages.length > 0 && (
+                    <ChatList
+                      threads={threadMessages}
+                      selectedCommunication={selectedThread}
+                      getThreadUri={getThreadUri}
+                    />
+                  )
+                )}
+                {threadMessages.length === 0 && !loading && <EmptyMessagesState />}
+              </ScrollArea>
+              {!loading && total !== undefined && total > itemsPerPage && (
+                <Box p="md">
+                  <Center>
+                    <Pagination
+                      value={currentPage}
+                      total={Math.ceil(total / itemsPerPage)}
+                      onChange={(page) => {
+                        const offset = (page - 1) * itemsPerPage;
+                        onChange({
+                          ...currentSearch,
+                          offset,
+                        });
+                      }}
+                      size="sm"
+                      siblings={1}
+                      boundaries={1}
+                    />
+                  </Center>
+                </Box>
+              )}
+            </Paper>
+          </Flex>
+
+          {selectedThread ? (
+            <>
+              {/* Main chat area */}
+              <Flex direction="column" style={{ flex: 1 }} h="100%" className={classes.rightBorder}>
+                <Paper h="100%">
+                  <Stack h="100%" gap={0}>
+                    <Flex h={64} align="center" justify="space-between" p="md">
+                      <Text fw={800} truncate fz="lg">
+                        {selectedThread.topic?.text ?? 'Messages'}
+                      </Text>
+
+                      <Menu position="bottom-end" shadow="md">
+                        <Menu.Target>
+                          <Button
+                            variant="light"
+                            color={getStatusColor(selectedThread.status)}
+                            rightSection={
+                              selectedThread.status === 'completed' ? undefined : <IconChevronDown size={16} />
+                            }
+                            radius="xl"
+                            size="sm"
+                          >
+                            {selectedThread.status
+                              .split('-')
+                              .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                              .join(' ')}
+                          </Button>
+                        </Menu.Target>
+
+                        {selectedThread.status !== 'completed' && (
+                          <>
+                            <Menu.Dropdown>
+                              <Menu.Item onClick={() => handleTopicStatusChangeWithErrorHandling('completed')}>
+                                Completed
+                              </Menu.Item>
+                            </Menu.Dropdown>
+                          </>
+                        )}
+                      </Menu>
+                    </Flex>
+                    <Divider />
+                    <Flex direction="column" style={{ flex: 1 }} h="100%">
+                      <ThreadChat
+                        key={`${getReferenceString(selectedThread)}`}
+                        title={'Messages'}
+                        thread={selectedThread}
+                        excludeHeader={true}
+                      />
+                    </Flex>
+                  </Stack>
+                </Paper>
+              </Flex>
+
+              {/* Right sidebar - Patient summary */}
+              {selectedThread.subject && showPatientSummary && (
+                <Flex direction="column" w={300} h="100%">
+                  <ScrollArea p={0} h="100%" scrollbarSize={10} type="hover" scrollHideDelay={250}>
+                    <PatientSummary key={selectedThread.id} patient={selectedThread.subject as Reference<Patient>} />
+                  </ScrollArea>
+                </Flex>
+              )}
+            </>
+          ) : (
+            <Flex direction="column" style={{ flex: 1 }} h="100%">
+              <NoMessages />
+            </Flex>
+          )}
+        </Flex>
+      </div>
+      <NewTopicDialog subject={subject} opened={modalOpened} onClose={closeModal} onSubmit={handleNewTopicCompletion} />
+    </>
+  );
+}
+
+function NoMessages(): JSX.Element {
+  return (
+    <Center h="100%" w="100%">
+      <Stack align="center" gap="md">
+        <ThemeIcon size={64} variant="light" color="gray">
+          <IconMessageCircle size={32} />
+        </ThemeIcon>
+        <Stack align="center" gap="xs">
+          <Text size="sm" c="dimmed" ta="center">
+            Select a message from the list to view details
+          </Text>
+        </Stack>
+      </Stack>
+    </Center>
+  );
+}
+
+function getStatusColor(status: Communication['status']): string {
+  if (status === 'completed') {
+    return 'green';
+  }
+  if (status === 'stopped') {
+    return 'red';
+  }
+  return 'blue';
+}
+
+function EmptyMessagesState(): JSX.Element {
+  return (
+    <Flex direction="column" h="100%" justify="center" align="center">
+      <Stack align="center" gap="md" pt="xl">
+        <IconMessageCircle size={64} color="var(--mantine-color-gray-4)" />
+        <Text size="lg" c="dimmed" fw={500}>
+          No messages found
+        </Text>
+      </Stack>
+    </Flex>
+  );
+}

package/dist/examples/vintasend-medplum-example/src/components/plandefinition/AddPlanDefinition.module.css

@@ -0,0 +1,40 @@
+.planDefinition {
+  cursor: pointer;
+}
+
+.selected {
+  background-color: var(--mantine-color-blue-6) !important;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--mantine-spacing-md);
+  height: 70px;
+}
+
+.preview {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.notFound {
+  display: flex;
+  background-color: var(--mantine-color-yellow-0);
+  color: var(--mantine-color-yellow-8);
+  align-items: center;
+  justify-content: center;
+}
+
+[data-mantine-color-scheme='dark'] .preview,
+[data-mantine-color-scheme='dark'] .planDefinition,
+[data-mantine-color-scheme='dark'] .footer {
+  background-color: var(--mantine-color-dark-8);
+}
+
+[data-mantine-color-scheme='light'] .preview,
+[data-mantine-color-scheme='light'] .planDefinition,
+[data-mantine-color-scheme='light'] .footer {
+  background-color: var(--mantine-color-gray-1);
+}

package/dist/examples/vintasend-medplum-example/src/components/plandefinition/AddPlanDefinition.tsx

@@ -0,0 +1,257 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import {
+  Box,
+  Button,
+  Card,
+  Grid,
+  Loader,
+  Modal,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from '@mantine/core';
+import { showNotification } from '@mantine/notifications';
+import { normalizeErrorString } from '@medplum/core';
+import type { PlanDefinition } from '@medplum/fhirtypes';
+import { useMedplum } from '@medplum/react';
+import { IconCircleCheck, IconCircleOff } from '@tabler/icons-react';
+import cx from 'clsx';
+import { useCallback, useEffect, useState } from 'react';
+import type { JSX } from 'react';
+import classes from './AddPlanDefinition.module.css';
+
+interface AddPlanDefinitionProps {
+  encounterId: string;
+  patientId: string;
+  onApply: () => void;
+}
+
+export const AddPlanDefinition = ({ encounterId, patientId, onApply }: AddPlanDefinitionProps): JSX.Element => {
+  const [opened, setOpened] = useState(false);
+  const [planDefinitions, setPlanDefinitions] = useState<PlanDefinition[]>([]);
+  const [selectedPlanDefinition, setSelectedPlanDefinition] = useState<PlanDefinition | undefined>();
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(false);
+  const medplum = useMedplum();
+
+  const handleApplyPlanDefinition = async (): Promise<void> => {
+    if (!selectedPlanDefinition) {
+      showNotification({
+        color: 'red',
+        icon: <IconCircleOff />,
+        title: 'Error',
+        message: 'No plan definition selected',
+      });
+      return;
+    }
+
+    try {
+      await medplum.post(medplum.fhirUrl('PlanDefinition', selectedPlanDefinition.id as string, '$apply'), {
+        resourceType: 'Parameters',
+        parameter: [
+          {
+            name: 'subject',
+            valueString: `Patient/${patientId}`,
+          },
+          {
+            name: 'encounter',
+            valueString: `Encounter/${encounterId}`,
+          },
+        ],
+      });
+
+      showNotification({
+        color: 'green',
+        icon: <IconCircleCheck />,
+        title: 'Success',
+        message: 'Plan definition applied to the encounter',
+      });
+
+      onApply();
+      handleClose();
+    } catch (error) {
+      showNotification({
+        color: 'red',
+        icon: <IconCircleOff />,
+        title: 'Error',
+        message: normalizeErrorString(error),
+      });
+    }
+  };
+
+  const fetchPlanDefinitions = useCallback(
+    (query?: string) => {
+      setIsLoading(true);
+      const searchParam = query ? `name=${query}` : undefined;
+      medplum
+        .searchResources('PlanDefinition', searchParam)
+        .then((result) => {
+          const filteredResult = result.filter((pd) => pd.name?.trim());
+          setPlanDefinitions(filteredResult);
+        })
+        .catch((err) => {
+          showNotification({
+            color: 'red',
+            icon: <IconCircleOff />,
+            title: 'Error',
+            message: normalizeErrorString(err),
+          });
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    },
+    [medplum]
+  );
+
+  useEffect(() => {
+    if (opened) {
+      fetchPlanDefinitions();
+    }
+  }, [opened, fetchPlanDefinitions]);
+
+  useEffect(() => {
+    const debounceTimer = setTimeout(() => {
+      if (opened) {
+        fetchPlanDefinitions(searchQuery);
+      }
+    }, 300);
+
+    return () => clearTimeout(debounceTimer);
+  }, [searchQuery, opened, fetchPlanDefinitions]);
+
+  const handleClose = (): void => {
+    setOpened(false);
+    setSelectedPlanDefinition(undefined);
+    setSearchQuery('');
+  };
+
+  return (
+    <>
+      <Stack gap="md">
+        <Button variant="outline" color="blue" fullWidth onClick={() => setOpened(true)}>
+          Add care template
+        </Button>
+        <Text size="sm">Task groups predefined by care planner</Text>
+      </Stack>
+
+      <Modal
+        opened={opened}
+        onClose={handleClose}
+        title="Add Care Template"
+        size="75%"
+        styles={{
+          title: {
+            fontSize: '1.2rem',
+            fontWeight: 600,
+          },
+          body: {
+            padding: '0',
+            height: '80vh',
+          },
+        }}
+      >
+        <Stack h="100%" justify="space-between" gap={0}>
+          <Box flex={1} miw={0}>
+            <Grid p="md">
+              <Grid.Col span={6} pr="md">
+                <Box>
+                  <Title order={5} mb="xs">
+                    Select care template
+                  </Title>
+                  <Text size="sm" c="dimmed" mb="md">
+                    Care templates are predefined sets of actions that can be applied to encounters.
+                  </Text>
+
+                  <TextInput
+                    placeholder="Search by name"
+                    mb="md"
+                    value={searchQuery}
+                    onChange={(event) => setSearchQuery(event.currentTarget.value)}
+                    rightSection={isLoading ? <Loader size={16} /> : null}
+                    styles={{
+                      input: {
+                        '&:focus': {
+                          borderColor: '#228be6',
+                        },
+                      },
+                    }}
+                  />
+
+                  <ScrollArea style={{ height: 'calc(80vh - 250px)' }} type="scroll">
+                    {planDefinitions.length > 0 &&
+                      planDefinitions.map((plan) => (
+                        <Card
+                          key={plan.id}
+                          p="md"
+                          mb="xs"
+                          className={cx(classes.planDefinition, {
+                            [classes.selected]: selectedPlanDefinition?.id === plan.id,
+                          })}
+                          onClick={() => setSelectedPlanDefinition(plan)}
+                        >
+                          <Text fz="md" fw={500} c={selectedPlanDefinition?.id === plan.id ? 'white' : undefined}>
+                            {plan.name}
+                          </Text>
+                          <Text fw={500} c={selectedPlanDefinition?.id === plan.id ? 'white' : 'dimmed'}>
+                            {plan.subtitle}
+                          </Text>
+                        </Card>
+                      ))}
+
+                    {planDefinitions.length === 0 && !isLoading && (
+                      <Paper className={classes.notFound} h={40}>
+                        <Text>Nothing found! Try searching for another name of the care plan.</Text>
+                      </Paper>
+                    )}
+                  </ScrollArea>
+                </Box>
+              </Grid.Col>
+
+              <Grid.Col span={6}>
+                <Paper withBorder className={classes.preview}>
+                  <ScrollArea style={{ height: 'calc(80vh - 110px)' }} type="scroll">
+                    <Stack gap="sm" px="md" pt="md">
+                      <Title order={5}>Preview</Title>
+                      {selectedPlanDefinition ? (
+                        <>
+                          <Stack gap={0} p={0}>
+                            <Text fz="md" fw={500}>
+                              {selectedPlanDefinition.name}
+                            </Text>
+                            <Text fw={500} c="dimmed">
+                              {selectedPlanDefinition.subtitle}
+                            </Text>
+                          </Stack>
+
+                          <Stack gap="xs" pb="md">
+                            {selectedPlanDefinition.action?.map((action, index) => (
+                              <Card key={`${action.id}-task-${index}`} withBorder shadow="sm">
+                                <Text fw={500}>{action.title}</Text>
+                                {action.description && <Text c="dimmed">{action.description}</Text>}
+                              </Card>
+                            ))}
+                          </Stack>
+                        </>
+                      ) : (
+                        <Text c="dimmed">Select a template to see preview.</Text>
+                      )}
+                    </Stack>
+                  </ScrollArea>
+                </Paper>
+              </Grid.Col>
+            </Grid>
+          </Box>
+
+          <Box className={classes.footer} h={70} p="md">
+            <Button onClick={handleApplyPlanDefinition}>Add care template</Button>
+          </Box>
+        </Stack>
+      </Modal>
+    </>
+  );
+};

package/dist/examples/vintasend-medplum-example/src/components/schedule/CreateVisit.module.css

@@ -0,0 +1,7 @@
+[data-mantine-color-scheme='dark'] .planDefinition {
+  background-color: var(--mantine-color-dark-8);
+}
+
+[data-mantine-color-scheme='light'] .planDefinition {
+  background-color: var(--mantine-color-gray-1);
+}