OTR-1954: Add the ability for follow-ups to be billable & attached to a schedule

apps/ehr/src/components/AppointmentTableRow.tsx

@@ -1,4 +1,5 @@
 import { progressNoteIcon, startIntakeIcon } from '@ehrTheme/icons';
+import CallSplitIcon from '@mui/icons-material/CallSplit';
 import ChatOutlineIcon from '@mui/icons-material/ChatOutlined';
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
@@ -556,6 +557,8 @@ export default function AppointmentTableRow({
     return null;
   }
   const encounterId: string = encounter.id;
+  const navAppointmentId = appointment.parentAppointmentId || appointment.id;
+  const followUpParams = appointment.isFollowUp ? `?encounterId=${encounterId}` : '';
 
   const handleStartIntakeButton = async (): Promise<void> => {
     setStartIntakeButtonLoading(true);
@@ -571,7 +574,7 @@ export default function AppointmentTableRow({
         },
         oystehrZambda
       );
-      navigate(`/in-person/${appointment.id}/patient-info`);
+      navigate(`/in-person/${navAppointmentId}/patient-info${followUpParams}`);
     } catch (error) {
       console.error(error);
       enqueueSnackbar('An error occurred. Please try again.', { variant: 'error' });
@@ -598,7 +601,7 @@ export default function AppointmentTableRow({
   const handleProgressNoteButton = async (): Promise<void> => {
     setProgressNoteButtonLoading(true);
     try {
-      navigate(`/in-person/${appointment.id}/${ROUTER_PATH.REVIEW_AND_SIGN}`);
+      navigate(`/in-person/${navAppointmentId}/${ROUTER_PATH.REVIEW_AND_SIGN}${followUpParams}`);
     } catch (error) {
       console.error(error);
       enqueueSnackbar('An error occurred. Please try again.', { variant: 'error' });
@@ -832,15 +835,22 @@ export default function AppointmentTableRow({
       </TableCell>
       <TableCell sx={{ verticalAlign: 'center', wordWrap: 'break-word' }}>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
-          <Link
-            to={`/patient/${appointment.patient.id}`}
-            style={{ textDecoration: 'none' }}
-            data-testid={dataTestIds.dashboard.patientName}
-          >
-            <Typography variant="subtitle2" sx={{ fontSize: '16px', color: '#000' }}>
-              {patientName}
-            </Typography>
-          </Link>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+            <Link
+              to={`/patient/${appointment.patient.id}`}
+              style={{ textDecoration: 'none' }}
+              data-testid={dataTestIds.dashboard.patientName}
+            >
+              <Typography variant="subtitle2" sx={{ fontSize: '16px', color: '#000' }}>
+                {patientName}
+              </Typography>
+            </Link>
+            {appointment.isFollowUp && (
+              <Tooltip title="Follow-up visit">
+                <CallSplitIcon sx={{ fontSize: 16, color: 'text.secondary', transform: 'rotate(180deg)' }} />
+              </Tooltip>
+            )}
+          </Box>
           {appointment.needsDOBConfirmation ? (
             <GenericToolTip title="Date of birth for returning patient was not confirmed" customWidth="170px">
               <Box sx={{ display: 'flex', gap: 0.75, alignItems: 'center', flexWrap: 'nowrap' }}>
@@ -989,7 +999,7 @@ export default function AppointmentTableRow({
         <Stack direction={'row'} spacing={1}>
           <GoToButton
             text="Visit Details"
-            onClick={() => navigate(`/visit/${appointment.id}`)}
+            onClick={() => navigate(`/visit/${navAppointmentId}${followUpParams}`)}
             dataTestId={dataTestIds.dashboard.visitDetailsButton}
           >
             <MedicalInformationIcon />

apps/ehr/src/components/AppointmentTableRowMobile.tsx

@@ -50,7 +50,12 @@ export default function AppointmentTableRowMobile({
       }}
     >
       <TableCell colSpan={9}>
-        <Link to={`/visit/${appointment.id}`} style={linkStyle}>
+        <Link
+          to={`/visit/${appointment.parentAppointmentId || appointment.id}${
+            appointment.isFollowUp ? `?encounterId=${appointment.encounterId}` : ''
+          }`}
+          style={linkStyle}
+        >
           <Grid container spacing={1}>
             <Grid item xs={12} justifyContent="space-between">
               <Grid

apps/ehr/src/components/PatientEncountersGrid.tsx

@@ -255,11 +255,26 @@ export const PatientEncountersGrid: FC<PatientEncountersGridProps> = (props) =>
         return encounter.office ? encounter.office : '-';
       case 'status': {
         if (!encounter.status) return null;
+        // Scheduled follow-ups use encounter status directly (planned, arrived, etc.)
+        // Annotation follow-ups use OPEN/RESOLVED
+        if (encounter.followupSubtype === 'scheduled') {
+          return <Typography variant="body2">{encounter.status}</Typography>;
+        }
         const statusVal = encounter.status === 'in-progress' ? 'OPEN' : 'RESOLVED';
         return getFollowupStatusChip(statusVal);
       }
       case 'note': {
-        const { encounterId, originalAppointmentId } = encounter;
+        const { encounterId, originalAppointmentId, followupSubtype } = encounter;
+        // Scheduled follow-ups use the parent's appointment ID so the full encounter tree loads,
+        // with encounterId param to select the scheduled follow-up's encounter for display
+        if (followupSubtype === 'scheduled' && originalAppointmentId) {
+          if (encounter.status === 'planned' || encounter.status === 'arrived') {
+            return '-';
+          }
+          const to = `/in-person/${originalAppointmentId}/review-and-sign?encounterId=${encounterId}`;
+          return <RoundedButton to={to}>Progress Note</RoundedButton>;
+        }
+        // Annotation follow-ups use the limited follow-up note view
         if (!originalAppointmentId) return '-';
         const to = `/in-person/${originalAppointmentId}/follow-up-note${
           encounterId ? `?encounterId=${encounterId}` : ''

apps/ehr/src/features/external-labs/components/labs-orders/LabBreadcrumbs.tsx

@@ -1,21 +1,21 @@
 import { FC, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
 import { BaseBreadcrumbs } from 'src/components/BaseBreadcrumbs';
-import { useAppointmentData } from 'src/features/visits/shared/stores/appointment/appointment.store';
 
 interface LabBreadcrumbsProps {
   sectionName: string;
   children: React.ReactNode;
 }
 
 export const LabBreadcrumbs: FC<LabBreadcrumbsProps> = ({ sectionName, children }) => {
-  const { appointment } = useAppointmentData();
+  const { id: appointmentIdFromUrl } = useParams();
 
   const baseCrumb = useMemo(
     () => ({
       label: 'External Labs',
-      path: appointment?.id ? `/in-person/${appointment.id}/external-lab-orders` : null,
+      path: appointmentIdFromUrl ? `/in-person/${appointmentIdFromUrl}/external-lab-orders` : null,
     }),
-    [appointment?.id]
+    [appointmentIdFromUrl]
   );
 
   return (

apps/ehr/src/features/external-labs/pages/CreateExternalLabOrder.tsx

@@ -18,7 +18,7 @@ import {
 import Oystehr from '@oystehr/sdk';
 import { enqueueSnackbar } from 'notistack';
 import React, { ReactElement, useEffect, useMemo, useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { ActionsList } from 'src/components/ActionsList';
 import { DeleteIconButton } from 'src/components/DeleteIconButton';
 import DetailPageContainer from 'src/features/common/DetailPageContainer';
@@ -65,16 +65,11 @@ export const CreateExternalLabOrder: React.FC<CreateExternalLabOrdersProps> = ()
   const theme = useTheme();
   const { oystehrZambda } = useApiClients();
   const navigate = useNavigate();
+  const { id: appointmentIdFromUrl } = useParams();
   const [error, setError] = useState<(string | ReactElement)[] | undefined>(undefined);
   const [submitting, setSubmitting] = useState<boolean>(false);
   const apiClient = useOystehrAPIClient();
-  const {
-    encounter,
-    appointment,
-    patient,
-    location: apptLocation,
-    followUpOriginEncounter: mainEncounter,
-  } = useAppointmentData();
+  const { encounter, patient, location: apptLocation, followUpOriginEncounter: mainEncounter } = useAppointmentData();
   const { chartData, setPartialChartData } = useChartData();
   const { mutate: saveCPTChartData } = useSaveChartData();
   const { visitType } = useGetAppointmentAccessibility();
@@ -212,7 +207,7 @@ export const CreateExternalLabOrder: React.FC<CreateExternalLabOrdersProps> = ()
           selectedPaymentMethod: selectedPaymentMethod,
           clinicalInfoNoteByUser: clinicalInfoNotes,
         });
-        navigate(`/in-person/${appointment?.id}/external-lab-orders`);
+        navigate(`/in-person/${appointmentIdFromUrl}/external-lab-orders`);
       } catch (e) {
         const sdkError = e as Oystehr.OystehrSdkError;
         console.log('error creating external lab order', sdkError.code, sdkError.message);
@@ -221,7 +216,7 @@ export const CreateExternalLabOrder: React.FC<CreateExternalLabOrdersProps> = ()
           setError([
             <>
               Information necessary to submit labs is missing. Please navigate to{' '}
-              <Link to={`/visit/${appointment?.id}`}>visit details</Link> and complete all Worker's Compensation
+              <Link to={`/visit/${appointmentIdFromUrl}`}>visit details</Link> and complete all Worker's Compensation
               Information.
             </>,
           ]);
@@ -611,7 +606,7 @@ export const CreateExternalLabOrder: React.FC<CreateExternalLabOrdersProps> = ()
                     variant="outlined"
                     sx={{ borderRadius: '50px', textTransform: 'none', fontWeight: 600 }}
                     onClick={() => {
-                      navigate(`/in-person/${appointment?.id}/external-lab-orders`);
+                      navigate(`/in-person/${appointmentIdFromUrl}/external-lab-orders`);
                     }}
                   >
                     Cancel

apps/ehr/src/features/in-house-labs/components/InHouseLabsBreadcrumbs.tsx

@@ -1,21 +1,20 @@
 import { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
 import { BaseBreadcrumbs } from 'src/components/BaseBreadcrumbs';
 import { getInHouseLabsUrl } from 'src/features/visits/in-person/routing/helpers';
-import { useAppointmentData } from 'src/features/visits/shared/stores/appointment/appointment.store';
 
 export const InHouseLabsBreadcrumbs: React.FC<{ children: React.ReactNode; pageName: string }> = ({
   children,
   pageName,
 }) => {
-  const { appointment } = useAppointmentData();
-  const appointmentId = appointment?.id;
+  const { id: appointmentIdFromUrl } = useParams();
 
   const baseCrumb = useMemo(() => {
     return {
       label: 'In-House Labs',
-      path: appointmentId ? getInHouseLabsUrl(appointmentId) : null,
+      path: appointmentIdFromUrl ? getInHouseLabsUrl(appointmentIdFromUrl) : null,
     };
-  }, [appointmentId]);
+  }, [appointmentIdFromUrl]);
 
   return (
     <BaseBreadcrumbs sectionName={pageName} baseCrumb={baseCrumb}>

apps/ehr/src/features/in-house-labs/pages/InHouseLabOrderCreatePage.tsx

@@ -25,7 +25,7 @@ import {
 import Oystehr from '@oystehr/sdk';
 import { enqueueSnackbar } from 'notistack';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { ActionsList } from 'src/components/ActionsList';
 import { DeleteIconButton } from 'src/components/DeleteIconButton';
 import { dataTestIds } from 'src/constants/data-test-ids';
@@ -59,6 +59,7 @@ export const InHouseLabOrderCreatePage: React.FC = () => {
   const theme = useTheme();
   const { oystehrZambda } = useApiClients();
   const navigate = useNavigate();
+  const { id: appointmentIdFromUrl } = useParams();
   const location = useLocation();
   const [loading, setLoading] = useState(false);
   const [selectedTests, setSelectedTests] = useState<TestItem[]>([]);
@@ -73,7 +74,7 @@ export const InHouseLabOrderCreatePage: React.FC = () => {
     type?: 'repeat' | 'reflex';
   };
 
-  const { encounter, appointment } = useAppointmentData();
+  const { encounter } = useAppointmentData();
   const { chartData, setPartialChartData } = useChartData();
   const didPrimaryDiagnosisInit = useRef(false);
   const didPrefillInit = useRef(false);
@@ -216,9 +217,9 @@ export const InHouseLabOrderCreatePage: React.FC = () => {
 
         if (res.serviceRequestIds.length === 1) {
           // we will only nav forward if one test was created, else we will direct the user back to the table
-          navigate(`/in-person/${appointment?.id}/in-house-lab-orders/${res.serviceRequestIds[0]}/order-details`);
+          navigate(`/in-person/${appointmentIdFromUrl}/in-house-lab-orders/${res.serviceRequestIds[0]}/order-details`);
         } else {
-          navigate(`/in-person/${appointment?.id}/in-house-lab-orders`);
+          navigate(`/in-person/${appointmentIdFromUrl}/in-house-lab-orders`);
         }
       } catch (e) {
         const sdkError = e as Oystehr.OystehrSdkError;

apps/ehr/src/features/in-house-labs/pages/InHouseLabsPage.tsx

@@ -1,6 +1,6 @@
 import { Box, Stack } from '@mui/material';
 import React, { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import ListViewContainer from 'src/features/common/ListViewContainer';
 import { getInHouseLabOrderCreateUrl } from 'src/features/visits/in-person/routing/helpers';
 import { useGetAppointmentAccessibility } from 'src/features/visits/shared/hooks/useGetAppointmentAccessibility';
@@ -14,8 +14,9 @@ const inHouseLabsColumns: InHouseLabsTableColumn[] = ['testType', 'orderAdded',
 
 export const InHouseLabsPage: React.FC = () => {
   const navigate = useNavigate();
-  const { appointment, encounter } = useAppointmentData();
-  const appointmentId = appointment?.id;
+  const { id: appointmentIdFromUrl } = useParams();
+  const { encounter } = useAppointmentData();
+  const appointmentId = appointmentIdFromUrl;
   const encounterId = encounter?.id;
   const { isAppointmentReadOnly: isReadOnly } = useGetAppointmentAccessibility();
 

apps/ehr/src/features/nursing-orders/components/BreadCrumbs.tsx

@@ -1,14 +1,14 @@
 import { FC } from 'react';
+import { useParams } from 'react-router-dom';
 import CustomBreadcrumbs from 'src/components/CustomBreadcrumbs';
-import { useAppointmentData } from 'src/features/visits/shared/stores/appointment/appointment.store';
 
 export const BreadCrumbs: FC = () => {
-  const { appointment } = useAppointmentData();
+  const { id: appointmentIdFromUrl } = useParams();
 
   return (
     <CustomBreadcrumbs
       chain={[
-        { link: `/in-person/${appointment?.id}/nursing-orders`, children: 'Orders' },
+        { link: `/in-person/${appointmentIdFromUrl}/nursing-orders`, children: 'Orders' },
         { link: '#', children: 'Nursing Order' },
       ]}
     />

apps/ehr/src/features/nursing-orders/pages/NursingOrdersPage.tsx

@@ -1,6 +1,6 @@
 import { Box, Stack } from '@mui/material';
 import React, { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { dataTestIds } from 'src/constants/data-test-ids';
 import { getNursingOrderCreateUrl } from 'src/features/visits/in-person/routing/helpers';
 import { useGetAppointmentAccessibility } from 'src/features/visits/shared/hooks/useGetAppointmentAccessibility';
@@ -13,8 +13,9 @@ const nursingOrdersColumns: NursingOrdersTableColumn[] = ['order', 'orderAdded',
 
 export const NursingOrdersPage: React.FC = () => {
   const navigate = useNavigate();
-  const { appointment, encounter } = useAppointmentData();
-  const appointmentId = appointment?.id;
+  const { id: appointmentIdFromUrl } = useParams();
+  const { encounter } = useAppointmentData();
+  const appointmentId = appointmentIdFromUrl;
   const encounterId = encounter?.id;
   const { isAppointmentReadOnly: isReadOnly } = useGetAppointmentAccessibility();
 

apps/ehr/src/features/radiology/components/RadiologyBreadcrumbs.tsx

@@ -1,9 +1,8 @@
 import { Box, Link as MuiLink, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { FC } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import { getRadiologyUrl } from 'src/features/visits/in-person/routing/helpers';
-import { useAppointmentData } from 'src/features/visits/shared/stores/appointment/appointment.store';
 
 interface RadiologyBreadcrumbsProps {
   sectionName: string;
@@ -35,13 +34,13 @@ export const WithRadiologyBreadcrumbs: FC<RadiologyBreadcrumbsProps> = ({
   disableLabsLink = false,
   children,
 }) => {
-  const { appointment } = useAppointmentData();
+  const { id: appointmentIdFromUrl } = useParams();
 
   return (
     <PageWrapper>
       <BreadcrumbsContainer>
-        {!disableLabsLink && appointment?.id ? (
-          <MuiLink component={Link} to={getRadiologyUrl(appointment.id)} color="text.primary">
+        {!disableLabsLink && appointmentIdFromUrl ? (
+          <MuiLink component={Link} to={getRadiologyUrl(appointmentIdFromUrl)} color="text.primary">
             Radiology
           </MuiLink>
         ) : (

apps/ehr/src/features/radiology/pages/CreateRadiologyOrder.tsx

@@ -28,7 +28,7 @@ import {
 import { ClearIcon } from '@mui/x-date-pickers';
 import { enqueueSnackbar } from 'notistack';
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { dataTestIds } from 'src/constants/data-test-ids';
 import DetailPageContainer from 'src/features/common/DetailPageContainer';
 import { getRadiologyUrl } from 'src/features/visits/in-person/routing/helpers';
@@ -71,10 +71,11 @@ export const CreateRadiologyOrder: React.FC<CreateRadiologyOrdersProps> = () =>
   const theme = useTheme();
   const { oystehrZambda } = useApiClients();
   const navigate = useNavigate();
+  const { id: appointmentIdFromUrl } = useParams();
   const [error, setError] = useState<string[] | undefined>(undefined);
   const [submitting, setSubmitting] = useState<boolean>(false);
   const { mutate: saveChartData } = useSaveChartData();
-  const { encounter, appointment } = useAppointmentData();
+  const { encounter } = useAppointmentData();
   const { chartData, setPartialChartData } = useChartData();
   const { diagnosis } = chartData || {};
   const primaryDiagnosis = diagnosis?.find((d) => d.isPrimary);
@@ -227,7 +228,7 @@ export const CreateRadiologyOrder: React.FC<CreateRadiologyOrdersProps> = () =>
           });
         }
 
-        navigate(getRadiologyUrl(appointment?.id || ''));
+        navigate(getRadiologyUrl(appointmentIdFromUrl || ''));
       } catch (e) {
         const error = e as any;
         console.log('error', JSON.stringify(error));
@@ -464,7 +465,7 @@ export const CreateRadiologyOrder: React.FC<CreateRadiologyOrdersProps> = () =>
                     variant="outlined"
                     sx={{ borderRadius: '50px', textTransform: 'none', fontWeight: 600 }}
                     onClick={() => {
-                      navigate(`/in-person/${appointment?.id}/radiology`);
+                      navigate(`/in-person/${appointmentIdFromUrl}/radiology`);
                     }}
                   >
                     Cancel