Skip to content

Issue 7794. Add the ability to 'Quick add' Procedure CPT AI recommendations #8483

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RomanGolchuk wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Issue 7794. Add the ability to 'Quick add' Procedure CPT AI recommendations #8483

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3075d9a
feat: re-use AiSectionContainer for CPT codes in Procedures
RomanGolchuk Jul 1, 2026
3827e26
fix: improve CPT recommendation UX and a11y in ProceduresNew
RomanGolchuk Jul 1, 2026
7b9d093
refactor: flatten nested CPT recommendation ternaries
RomanGolchuk Jul 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions apps/ehr/src/constants/data-test-ids.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,6 +468,8 @@ export const dataTestIds = {
procedureType: 'procedure-type',
cptCodeInput: 'cpt-code-input',
cptCode: 'cpt-code',
recommendedCptCode: (code: string) => `recommended-cpt-code-${code}`,
cptCodeQuickAddButton: (code: string) => `cpt-code-quick-add-${code}`,
diagnosis: 'diagnosis',
diagnosisItem: 'diagnosis-item',
diagnosisDeleteButton: 'diagnosis-delete-button',
Expand Down
23 changes: 1 addition & 22 deletions apps/ehr/src/features/visits/in-person/components/AiSuggestion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AddCircleOutline, CheckCircle, InfoOutlined } from '@mui/icons-material';
import { AddCircleOutline, CheckCircle } from '@mui/icons-material';
import {
Box,
Checkbox,
Expand Down Expand Up @@ -32,7 +32,6 @@ import {
MedicalConditionDTO,
MedicationDTO,
ObservationTextFieldDTO,
ProcedureSuggestion,
} from 'utils';

interface SearchResult {
Expand Down Expand Up @@ -290,7 +289,6 @@ export interface AiSuggestionProps {
title: string;
chartData?: GetChartDataResponse | undefined;
content?: ObservationTextFieldDTO[];
procedureSuggestions?: ProcedureSuggestion[];
loading?: boolean;
hideHeader?: boolean;
onAppendToNote?: (text: string, resourceId?: string) => void;
Expand All @@ -301,7 +299,6 @@ export default function AiSuggestion({
title,
chartData,
content,
procedureSuggestions,
loading,
hideHeader,
onAppendToNote,
Expand Down Expand Up @@ -505,24 +502,6 @@ export default function AiSuggestion({
}

function SuggestionsItem(): React.ReactElement {
if (procedureSuggestions) {
return (
<>
{procedureSuggestions.map((code) => (
<>
<Typography variant="body1">
<strong>{code.code}</strong> &ndash; {code.description}
<Tooltip title={code.useWhen}>
<IconButton size="small" sx={{ marginLeft: '5px' }}>
<InfoOutlined sx={{ fontSize: '17px' }} />
</IconButton>
</Tooltip>
</Typography>
</>
))}
</>
);
}
return (
<>
{content
Expand Down
66 changes: 58 additions & 8 deletions apps/ehr/src/features/visits/in-person/pages/ProceduresNew.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { AddCircleOutline, CheckCircle, InfoOutlined } from '@mui/icons-material';
import {
Autocomplete,
Backdrop,
Expand All @@ -14,12 +15,14 @@ import {
FormControlLabel,
FormHelperText,
FormLabel,
IconButton,
InputLabel,
MenuItem,
Radio,
RadioGroup,
Select,
TextField,
Tooltip,
Typography,
} from '@mui/material';
import { Box, Stack, useTheme } from '@mui/system';
Expand Down Expand Up @@ -70,6 +73,7 @@ import {
TECHNIQUES_VALUE_SET_URL,
TIME_SPENT_VALUE_SET_URL,
} from 'utils';
import { AiSectionContainer } from '../../shared/components/AiSection';
import { DiagnosesField } from '../../shared/components/assessment-tab/DiagnosesField';
import { PageTitle } from '../../shared/components/PageTitle';
import { QuickPicksButton } from '../../shared/components/QuickPicksButton';
Expand All @@ -80,7 +84,6 @@ import {
useRecommendBillingCodes,
} from '../../shared/stores/appointment/appointment.queries';
import { useChartData, useDeleteChartData, useSaveChartData } from '../../shared/stores/appointment/appointment.store';
import AiSuggestion from '../components/AiSuggestion';
import { InfoAlert } from '../components/InfoAlert';
import { ROUTER_PATH } from '../routing/routesInPerson';
import {
Expand Down Expand Up @@ -553,6 +556,15 @@ export default function ProceduresNew(): ReactElement {
});
};

const existingCptCodeSet = useMemo(() => new Set(state.cptCodes?.map((cptCode) => cptCode.code)), [state.cptCodes]);

const addRecommendedCptCode = (suggestion: ProcedureSuggestion): void =>
updateState((state) => {
if (!state.cptCodes?.some((cptCode) => cptCode.code === suggestion.code)) {
state.cptCodes = [...(state.cptCodes ?? []), { code: suggestion.code, display: suggestion.description }];
}
});

const cptWidget = (): ReactElement => {
return (
<>
Expand Down Expand Up @@ -1127,13 +1139,51 @@ export default function ProceduresNew(): ReactElement {
<TooltipWrapper tooltipProps={CPT_TOOLTIP_PROPS}>
<Typography style={{ color: '#0F347C', fontSize: '16px', fontWeight: '500' }}>CPT Code</Typography>
</TooltipWrapper>
{recommendedBillingCodes && (
<AiSuggestion
title="Recommended CPT Codes"
procedureSuggestions={recommendedBillingCodes}
loading={loadingSuggestions}
/>
)}
<AiSectionContainer isLoading={loadingSuggestions}>

@saewitz saewitz Jul 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The ternaries being all nested makes this difficult to understand

@RomanGolchuk RomanGolchuk Jul 2, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

refactored
7b9d093

{!loadingSuggestions &&
(recommendedBillingCodes && recommendedBillingCodes.length > 0 ? (
<ActionsList
data={recommendedBillingCodes}
getKey={(value) => value.code}
renderItem={(value) => (
<Typography data-testid={dataTestIds.documentProcedurePage.recommendedCptCode(value.code)}>
<strong>{value.code}</strong> &ndash; {value.description}
</Typography>
)}
renderActions={
isReadOnly
? undefined
: (value) => (
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
<Tooltip title={value.useWhen}>
<IconButton size="small">
<InfoOutlined sx={{ fontSize: '17px' }} />
</IconButton>
</Tooltip>
Comment thread
RomanGolchuk marked this conversation as resolved.
Outdated
{existingCptCodeSet.has(value.code) ? (
<IconButton size="small" disabled>
<CheckCircle sx={{ fontSize: '17px', color: 'success.main' }} />
</IconButton>
) : (
<Tooltip title="Add CPT code">
<IconButton
size="small"
onClick={() => addRecommendedCptCode(value)}
data-testid={dataTestIds.documentProcedurePage.cptCodeQuickAddButton(value.code)}
>
<AddCircleOutline sx={{ fontSize: '17px' }} />
</IconButton>
Comment thread
RomanGolchuk marked this conversation as resolved.
Outdated
</Tooltip>
)}
</Box>
)
}
divider
/>
) : (
<Typography color="secondary.light">No suggestions</Typography>
))}
Comment thread
RomanGolchuk marked this conversation as resolved.
Outdated
</AiSectionContainer>
{suggestionNote && suggestionNote.suggestions?.[0] !== 'Procedure details are included' && (
<Container
style={{
Expand Down
Loading