Medplum

// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors // SPDX-License-Identifier: Apache-2.0 import { Text, Title } from '@mantine/core'; import { getReferenceString } from '@medplum/core'; import type { Practitioner } from '@medplum/fhirtypes'; import { Document, ResourceName, SearchControl, useMedplum, useMedplumNavigate, useMedplumProfile, } from '@medplum/react'; import type { JSX } from 'react'; import { Outlet } from 'react-router'; /** * A page component that displays a searchable list of clinical observations. * Shows observations accessible to the current user in the current project context. * Provides search functionality by code, subject, and value, with navigation to observation details. * * @returns The observations listing page */ export function ObservationPage(): JSX.Element { const profile = useMedplumProfile() as Practitioner; const medplum = useMedplum(); const project = medplum.getProject(); const navigate = useMedplumNavigate(); return ( <Document> <Title>Observations</Title> <Text mb="sm"> Here are the Observations accessible to <ResourceName value={profile} link /> in{' '} <ResourceName value={project} link /> </Text> <SearchControl search={{ resourceType: 'Observation', fields: ['code', 'subject'], }} onClick={(e) => navigate(`/${getReferenceString(e.resource)}`)} hideToolbar /> <Outlet /> </Document> ); }