Render QuestionLabel inline inside the Structured Question #15086
Conversation
WalkthroughAdds a QuestionLabel to many questionnaire question components, introduces a new question prop on several components, restructures medication history display fields, and tightens conditional rendering for QuestionLabel in QuestionInput. Changes
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
yash-learner
changed the title
There was a problem hiding this comment.
Pull request overview
This PR reorganizes the questionnaire component architecture by moving the QuestionLabel component inside structured question types (symptom, service request, medication, diagnosis, and allergy questions) to enable inline positioning with historical record selectors. This creates a more consistent layout where labels and selectors appear side-by-side.
Changes:
- Added
questionprop to structured question components and importedQuestionLabel - Wrapped
QuestionLabelandHistoricalRecordSelectorin flex containers for inline layout - Updated
QuestionInputto conditionally hide labels for structured question types
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| SymptomQuestion.tsx | Added question prop and inline label/selector layout |
| ServiceRequestQuestion.tsx | Added question prop and QuestionLabel rendering |
| QuestionInput.tsx | Excluded structured questions from rendering duplicate labels |
| MedicationStatementQuestion.tsx | Added question prop and inline label/selector layout |
| MedicationRequestQuestion.tsx | Added question prop and inline label/selector layout |
| DiagnosisQuestion.tsx | Added question prop and inline label/selector layout |
| AllergyQuestion.tsx | Added question prop and QuestionLabel rendering |
| question, | ||
| questionnaireResponse, |
There was a problem hiding this comment.
The question parameter is added to the function signature but there's no corresponding type definition showing this parameter was added to AllergyQuestionProps. Ensure the interface includes question: Question property.
| offset, | ||
| limit, | ||
| exclude_verification_status: "entered_in_error", | ||
| <div className="flex justify-between items-center"> |
There was a problem hiding this comment.
The flex container may cause layout issues on small screens when both the label and selector try to fit in a single row. Consider adding responsive classes like flex-col md:flex-row to stack them vertically on mobile devices.
| <div className="flex justify-between items-center"> | |
| <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between"> |
There was a problem hiding this comment.
tested it looks good to me
| <div className="flex justify-between items-center"> | ||
| <QuestionLabel question={question} /> | ||
| <HistoricalRecordSelector< | ||
| MedicationRequestRead | MedicationStatementRead | ||
| > |
There was a problem hiding this comment.
The flex container may cause layout issues on small screens when both the label and selector try to fit in a single row. Consider adding responsive classes like flex-col md:flex-row to stack them vertically on mobile devices.
| <div className="flex justify-between items-center"> | ||
| <QuestionLabel question={question} /> | ||
| <HistoricalRecordSelector< | ||
| MedicationRequestRead | MedicationStatementRead | ||
| > |
There was a problem hiding this comment.
The flex container may cause layout issues on small screens when both the label and selector try to fit in a single row. Consider adding responsive classes like flex-col md:flex-row to stack them vertically on mobile devices.
| limit, | ||
| exclude_verification_status: "entered_in_error", | ||
| category: "encounter_diagnosis,chronic_condition", | ||
| <div className="flex justify-between items-center"> |
There was a problem hiding this comment.
The flex container may cause layout issues on small screens when both the label and selector try to fit in a single row. Consider adding responsive classes like flex-col md:flex-row to stack them vertically on mobile devices.
| <div className="flex justify-between items-center"> | |
| <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-2"> |
Deploying care-preview with
|
| Latest commit: |
c316f8e
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://1f6889d1.care-preview-a7w.pages.dev |
| Branch Preview URL: | https://render-qlabel-inine-for-sr.care-preview-a7w.pages.dev |
There was a problem hiding this comment.
Did not move description because right now none of the structured questions have description in src/components/Questionnaire/data/StructuredFormData.tsx
const charge_item_questionnaire: QuestionnaireRead = {
id: "charge_item",
slug: "charge_item",
version: "0.0.1",
title: "Charge Item",
status: "active",
subject_type: "encounter",
questions: [
{
id: "charge_item",
text: "Charge Item",
type: "structured",
structured_type: "charge_item",
link_id: "1.1",
required: true,
},
],
tags: [],
};
🎭 Playwright Test ResultsStatus: ✅ Passed
📊 Detailed results are available in the playwright-final-report artifact. Run: #4502 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
src/components/Questionnaire/QuestionTypes/ChargeItemQuestion.tsx (1)
31-57: Missing requiredquestionprop at call site in QuestionInput.tsx.The
ChargeItemQuestioncomponent requires the newquestionprop (line 46-57), and the function signature correctly destructures it (line 173-181), but the call site inQuestionInput.tsx(lines 183-187) does not pass it. Thequestionvariable is available in scope and should be spread into the component or added explicitly:Call site in QuestionInput.tsx
<ChargeItemQuestion {...commonProps} facilityId={facilityId} encounterId={encounterId} question={question} />src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx (1)
50-88: Add gaps to header layout for responsive wrapping.The header uses
flex-wrapfor responsive behavior, but lacksgap-*spacing, which can cause cramped appearance when wrapped on narrow screens.Proposed fix
- <div className="flex justify-between items-center flex-wrap"> + <div className="flex justify-between items-center flex-wrap gap-x-3 gap-y-2"> <QuestionLabel question={question} /> <HistoricalRecordSelector<SymptomRequest>All call sites correctly provide the
questionprop via spread ofcommonProps.src/components/Questionnaire/QuestionTypes/ServiceRequestQuestion.tsx (1)
36-74: TypeScript typing forupdateQuestionnaireResponseCBneeds the ResponseValue type extended, not just used as-is.The component correctly now passes the
questionprop, but the callback parameter typing requires more work. While other question components (FilesQuestion, MedicationRequestQuestion) useResponseValue[], ServiceRequestQuestion passes{ type: "service_request", value: ... }which is not currently a valid ResponseValue variant.To match the pattern:
- Extend ResponseValue in
src/types/questionnaire/form.tsto include the service_request variant:| RV<"service_request", ServiceRequestApplyActivityDefinitionSpec[]>- Update the callback to use
ResponseValue[]instead ofany[]This maintains consistency across all question type components while ensuring proper TypeScript safety for medical data collection.
🤖 Fix all issues with AI agents
In @src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx:
- Around line 549-663: The container div wrapping QuestionLabel and
HistoricalRecordSelector (the JSX block containing QuestionLabel and
HistoricalRecordSelector<DiagnosisRequest>) needs responsive wrapping; add a
flex-wrap class (e.g., include "flex-wrap" or use responsive classes like
"flex-wrap md:flex-nowrap") to the outer div so the label and selector will wrap
on narrow screens instead of overflowing; keep other classes (justify-between
items-center) and no logic changes to patientId, handleAddHistoricalDiagnoses,
or isPreview.
In @src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx:
- Around line 450-599: The dosage render for the MedicationRequest
structuredType can crash because it calls formatDosage(instructions[0]) without
guarding against an empty dosage_instruction array; update that render to safely
pull the first instruction (e.g., const inst = instructions?.[0] ?? {}) and call
formatDosage(inst) and getFrequencyDisplay(inst?.timing) so formatDosage never
receives undefined; likewise the MedicationStatement medicine render should
fallback to code when display is missing (use med?.display || med?.code) to
avoid blank values — modify the two render functions in the
HistoricalRecordSelector configuration inside MedicationRequestQuestion to use
these guarded patterns.
In @src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx:
- Around line 323-472: The render for dosage and duration can crash when
instructions is an empty array: guard by checking instructions?.[0] exists
before calling formatDosage and accessing timing/repeat (use a local const instr
= instructions?.[0]; const dosage = instr ? formatDosage(instr) : ""; const
frequency = instr ? getFrequencyDisplay(instr?.timing)?.meaning ?? "-" : "-";
similarly check instr?.timing?.repeat?.bounds_duration before using value), and
update the MedicationStatement medicine render to be defensive (use med?.display
?? med?.code ?? "-") to match the codebase pattern; adjust the render functions
in the structuredTypes block that reference formatDosage, getFrequencyDisplay
and medication rendering accordingly.
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
Outdated
Show resolved
Hide resolved
| <div className="flex justify-between items-center flex-wrap"> | ||
| <QuestionLabel question={question} /> | ||
| <HistoricalRecordSelector< | ||
| MedicationRequestRead | MedicationStatementRead | ||
| > | ||
| title={t("medication_history")} | ||
| structuredTypes={[ | ||
| { | ||
| type: t("past_prescriptions"), | ||
| displayFields: [ | ||
| { | ||
| key: "", | ||
| label: t("medicine"), | ||
| render: (med) => displayMedicationName(med), | ||
| }, | ||
| }, | ||
| { | ||
| key: "dosage_instruction", | ||
| label: t("duration"), | ||
| render: (instructions) => { | ||
| const duration = | ||
| instructions?.[0]?.timing?.repeat?.bounds_duration; | ||
| if (!duration?.value) return "-"; | ||
| return `${duration.value} ${duration.unit}`; | ||
| { | ||
| key: "dosage_instruction", | ||
| label: t("dosage"), | ||
| render: (instructions) => { | ||
| const dosage = formatDosage(instructions[0]) || ""; | ||
| const frequency = | ||
| getFrequencyDisplay(instructions[0]?.timing)?.meaning || | ||
| "-"; | ||
| return `${dosage}\n${frequency}`; | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| key: "created_by", | ||
| label: t("prescribed_by"), | ||
| render: (created_by) => ( | ||
| <div className="flex items-center gap-2"> | ||
| <Avatar | ||
| imageUrl={created_by?.profile_picture_url} | ||
| name={formatName(created_by, true)} | ||
| className="size-6 rounded-full" | ||
| /> | ||
| <span className="text-sm truncate"> | ||
| {formatName(created_by)} | ||
| </span> | ||
| </div> | ||
| ), | ||
| }, | ||
| ], | ||
| expandableFields: [ | ||
| { | ||
| key: "dosage_instruction", | ||
| label: t("instructions"), | ||
| render: (instructions) => | ||
| instructions?.[0]?.additional_instruction?.[0]?.display, | ||
| }, | ||
| { | ||
| key: "note", | ||
| label: t("notes"), | ||
| render: (note) => note, | ||
| }, | ||
| ], | ||
| queryKey: ["medication_requests", patientId], | ||
| queryFn: async ( | ||
| limit: number, | ||
| offset: number, | ||
| signal: AbortSignal, | ||
| ) => { | ||
| const response = await query(medicationRequestApi.list, { | ||
| pathParams: { patientId }, | ||
| queryParams: { | ||
| limit, | ||
| offset, | ||
| status: | ||
| "active,on_hold,draft,unknown,ended,completed,cancelled", | ||
| { | ||
| key: "dosage_instruction", | ||
| label: t("duration"), | ||
| render: (instructions) => { | ||
| const duration = | ||
| instructions?.[0]?.timing?.repeat?.bounds_duration; | ||
| if (!duration?.value) return "-"; | ||
| return `${duration.value} ${duration.unit}`; | ||
| }, | ||
| }, | ||
| })({ signal }); | ||
| return response; | ||
| }, | ||
| }, | ||
| { | ||
| type: t("medication_statements"), | ||
| displayFields: [ | ||
| { | ||
| key: "medication", | ||
| label: t("medicine"), | ||
| render: (med) => med?.display, | ||
| }, | ||
| { | ||
| key: "dosage_text", | ||
| label: t("dosage_instruction"), | ||
| render: (dosage) => dosage, | ||
| }, | ||
| { | ||
| key: "status", | ||
| label: t("status"), | ||
| render: (status: string) => t(`medication_status__${status}`), | ||
| }, | ||
| { | ||
| key: "created_by", | ||
| label: t("prescribed_by"), | ||
| render: (created_by) => ( | ||
| <div className="flex items-center gap-2"> | ||
| <Avatar | ||
| imageUrl={created_by?.profile_picture_url} | ||
| name={formatName(created_by, true)} | ||
| className="size-6 rounded-full" | ||
| /> | ||
| <span className="text-sm truncate"> | ||
| {formatName(created_by)} | ||
| </span> | ||
| </div> | ||
| ), | ||
| }, | ||
| ], | ||
| expandableFields: [ | ||
| { | ||
| key: "note", | ||
| label: t("notes"), | ||
| render: (note) => note, | ||
| { | ||
| key: "created_by", | ||
| label: t("prescribed_by"), | ||
| render: (created_by) => ( | ||
| <div className="flex items-center gap-2"> | ||
| <Avatar | ||
| imageUrl={created_by?.profile_picture_url} | ||
| name={formatName(created_by, true)} | ||
| className="size-6 rounded-full" | ||
| /> | ||
| <span className="text-sm truncate"> | ||
| {formatName(created_by)} | ||
| </span> | ||
| </div> | ||
| ), | ||
| }, | ||
| ], | ||
| expandableFields: [ | ||
| { | ||
| key: "dosage_instruction", | ||
| label: t("instructions"), | ||
| render: (instructions) => | ||
| instructions?.[0]?.additional_instruction?.[0]?.display, | ||
| }, | ||
| { | ||
| key: "note", | ||
| label: t("notes"), | ||
| render: (note) => note, | ||
| }, | ||
| ], | ||
| queryKey: ["medication_requests", patientId], | ||
| queryFn: async ( | ||
| limit: number, | ||
| offset: number, | ||
| signal: AbortSignal, | ||
| ) => { | ||
| const response = await query(medicationRequestApi.list, { | ||
| pathParams: { patientId }, | ||
| queryParams: { | ||
| limit, | ||
| offset, | ||
| status: | ||
| "active,on_hold,draft,unknown,ended,completed,cancelled", | ||
| }, | ||
| })({ signal }); | ||
| return response; | ||
| }, | ||
| ], | ||
| queryKey: ["medication_statements", patientId], | ||
| queryFn: async ( | ||
| limit: number, | ||
| offset: number, | ||
| signal: AbortSignal, | ||
| ) => { | ||
| const response = await query(medicationStatementApi.list, { | ||
| pathParams: { patientId }, | ||
| queryParams: { | ||
| limit, | ||
| offset, | ||
| status: | ||
| "active,on_hold,completed,stopped,unknown,not_taken,intended", | ||
| }, | ||
| { | ||
| type: t("medication_statements"), | ||
| displayFields: [ | ||
| { | ||
| key: "medication", | ||
| label: t("medicine"), | ||
| render: (med) => med?.display, | ||
| }, | ||
| { | ||
| key: "dosage_text", | ||
| label: t("dosage_instruction"), | ||
| render: (dosage) => dosage, | ||
| }, | ||
| { | ||
| key: "status", | ||
| label: t("status"), | ||
| render: (status: string) => t(`medication_status__${status}`), | ||
| }, | ||
| })({ signal }); | ||
| return response; | ||
| { | ||
| key: "created_by", | ||
| label: t("prescribed_by"), | ||
| render: (created_by) => ( | ||
| <div className="flex items-center gap-2"> | ||
| <Avatar | ||
| imageUrl={created_by?.profile_picture_url} | ||
| name={formatName(created_by, true)} | ||
| className="size-6 rounded-full" | ||
| /> | ||
| <span className="text-sm truncate"> | ||
| {formatName(created_by)} | ||
| </span> | ||
| </div> | ||
| ), | ||
| }, | ||
| ], | ||
| expandableFields: [ | ||
| { | ||
| key: "note", | ||
| label: t("notes"), | ||
| render: (note) => note, | ||
| }, | ||
| ], | ||
| queryKey: ["medication_statements", patientId], | ||
| queryFn: async ( | ||
| limit: number, | ||
| offset: number, | ||
| signal: AbortSignal, | ||
| ) => { | ||
| const response = await query(medicationStatementApi.list, { | ||
| pathParams: { patientId }, | ||
| queryParams: { | ||
| limit, | ||
| offset, | ||
| status: | ||
| "active,on_hold,completed,stopped,unknown,not_taken,intended", | ||
| }, | ||
| })({ signal }); | ||
| return response; | ||
| }, | ||
| }, | ||
| }, | ||
| ]} | ||
| buttonLabel={t("medication_history")} | ||
| onAddSelected={handleAddHistoricalMedications} | ||
| disableAPI={isPreview} | ||
| /> | ||
| ]} | ||
| buttonLabel={t("medication_history")} | ||
| onAddSelected={handleAddHistoricalMedications} | ||
| disableAPI={isPreview} | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let me locate and examine the formatDosage function
fd -t f "\.ts$" "\.tsx$" -x rg -l "formatDosage" {}Repository: ohcnetwork/care_fe
Length of output: 155
🏁 Script executed:
# Check the file in question and understand the context
head -600 "src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx" | tail -200Repository: ohcnetwork/care_fe
Length of output: 6923
🏁 Script executed:
# Search for displayMedicationName function
rg "function displayMedicationName|const displayMedicationName" -A 5Repository: ohcnetwork/care_fe
Length of output: 528
🏁 Script executed:
# Check formatDosage implementation
rg "formatDosage" -B 2 -A 10 | head -60Repository: ohcnetwork/care_fe
Length of output: 6409
🏁 Script executed:
# Check formatDosage implementation
rg "export.*formatDosage" -A 15 "src/components/Medicine/utils"Repository: ohcnetwork/care_fe
Length of output: 131
🏁 Script executed:
# Check displayMedicationName full implementation
rg "function displayMedicationName|export.*displayMedicationName" -A 25 "src/types/emr/medicationRequest"Repository: ohcnetwork/care_fe
Length of output: 2053
🏁 Script executed:
# Check MedicationStatementRead type definition
rg "type MedicationStatementRead|interface MedicationStatementRead" -A 20Repository: ohcnetwork/care_fe
Length of output: 1014
🏁 Script executed:
# Check if there are any actual usages of MedicationStatementRead.medication to understand structure
rg "MedicationStatementRead.*medication" -B 2 -A 5 | head -40Repository: ohcnetwork/care_fe
Length of output: 1865
🏁 Script executed:
# Find Medicine utils file
find src/components/Medicine -type f -name "*.ts" -o -name "*.tsx" | head -20Repository: ohcnetwork/care_fe
Length of output: 837
🏁 Script executed:
# Check Code type definition
rg "type Code|interface Code" -A 10 "src/types/base"Repository: ohcnetwork/care_fe
Length of output: 875
🏁 Script executed:
# Search for formatDosage in different location
rg "formatDosage" -lRepository: ohcnetwork/care_fe
Length of output: 525
🏁 Script executed:
# Check formatDosage implementation in src/components/Medicine/utils.ts
cat -n src/components/Medicine/utils.ts | grep -A 20 "formatDosage"Repository: ohcnetwork/care_fe
Length of output: 955
🏁 Script executed:
# Check if formatDosage handles null/undefined safely
rg "export.*formatDosage" -A 25 "src/components/Medicine/utils.ts"Repository: ohcnetwork/care_fe
Length of output: 929
🏁 Script executed:
# Also check the TreatmentSummary.tsx referenced in learnings to see medicine display pattern
rg "medication.*display.*code|med.*display.*code" -B 2 -A 2 "src/components/Patient/TreatmentSummary.tsx" | head -40Repository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Get more context on the formatDosage function to understand its safety
cat -n "src/components/Medicine/utils.ts"Repository: ohcnetwork/care_fe
Length of output: 4793
🏁 Script executed:
# Check how MedicationRequestDosageInstruction is defined to understand if empty array handling is needed
rg "type MedicationRequestDosageInstruction|interface MedicationRequestDosageInstruction" -A 15Repository: ohcnetwork/care_fe
Length of output: 1441
🏁 Script executed:
# Look at TreatmentSummary.tsx to see the actual pattern mentioned in learnings
sed -n '520,530p' "src/components/Patient/TreatmentSummary.tsx"Repository: ohcnetwork/care_fe
Length of output: 421
🏁 Script executed:
# Check if there are any guards on dosage_instruction arrays elsewhere in codebase
rg "dosage_instruction.*\[0\]|instructions\?.\[0\]" -B 3 -A 3 | head -60Repository: ohcnetwork/care_fe
Length of output: 5783
🏁 Script executed:
# Verify the exact line numbers to ensure we're looking at the right section
sed -n '495,510p' "src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx"Repository: ohcnetwork/care_fe
Length of output: 606
🏁 Script executed:
# Check if formatDosage is defensive about undefined input
rg "formatDosage\(undefined\)|formatDosage\(null\)" -A 5 -B 5Repository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Confirm MedicationStatementRead medication field more clearly
cat "src/types/emr/medicationStatement.ts" | grep -A 20 "export type MedicationStatementRead"Repository: ohcnetwork/care_fe
Length of output: 459
Guard against empty dosage_instruction arrays; formatDosage() will crash on undefined input.
At line ~509, formatDosage(instructions[0]) assumes the array is non-empty. If the API returns an empty dosage_instruction array, instructions[0] becomes undefined, and formatDosage attempts to access instruction.dose_and_rate on undefined, causing a runtime crash. Other parts of the codebase (e.g., DispensedMedicationList.tsx, MedicationBillForm.tsx) guard against this with instruction ?? {} or explicit checks. Add a safe-access guard:
Proposed fix
render: (instructions) => {
+ const first = instructions?.[0];
+ if (!first) return "-";
- const dosage = formatDosage(instructions[0]) || "";
+ const dosage = formatDosage(first) || "-";
- const frequency = getFrequencyDisplay(instructions[0]?.timing)?.meaning || "-";
+ const frequency = getFrequencyDisplay(first.timing)?.meaning || "-";
return `${dosage}\n${frequency}`;
},Also add fallback to code for MedicationStatement medicine display.
At line ~528, the MedicationStatement medicine render uses only med?.display without fallback. Since MedicationStatementRead.medication is a Code object with both display and code properties, add the fallback pattern for consistency and robustness:
- render: (med) => med?.display,
+ render: (med) => med?.display ?? med?.code ?? "-",🤖 Prompt for AI Agents
In @src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
around lines 450 - 599, The dosage render for the MedicationRequest
structuredType can crash because it calls formatDosage(instructions[0]) without
guarding against an empty dosage_instruction array; update that render to safely
pull the first instruction (e.g., const inst = instructions?.[0] ?? {}) and call
formatDosage(inst) and getFrequencyDisplay(inst?.timing) so formatDosage never
receives undefined; likewise the MedicationStatement medicine render should
fallback to code when display is missing (use med?.display || med?.code) to
avoid blank values — modify the two render functions in the
HistoricalRecordSelector configuration inside MedicationRequestQuestion to use
these guarded patterns.
There was a problem hiding this comment.
not related to this PR, those lines changed because of formatting
There was a problem hiding this comment.
@yash-learner, you're absolutely right—these are pre-existing concerns in the code that only appear in the diff due to the reformatting when you wrapped the HistoricalRecordSelector in the flex container with QuestionLabel. The logic itself wasn't modified in this PR, so these safety guards are out of scope here. Thanks for the clarification! 👍
🧠 Learnings used
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 14348
File: src/components/Patient/TreatmentSummary.tsx:523-523
Timestamp: 2025-11-14T14:26:31.165Z
Learning: In TreatmentSummary.tsx, medication statements (from medicationStatementApi) only contain SNOMED-coded medications and use `medication.medication.display ?? medication.medication.code` pattern, whereas medication requests (from medicationRequestApi) can have either SNOMED codes or inventory products and should use `displayMedicationName()` helper function to correctly handle both cases.
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PatientContext.tsx : Implement Patient Context for current patient selection and medical alerts
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/providers.instructions.md:0-0
Timestamp: 2025-11-25T13:52:33.081Z
Learning: Applies to src/Providers/**/*HistoryAPIProvider*{.ts,.tsx} : HistoryAPIProvider should manage navigation history for clinical workflows
Learnt from: pratyush07-hub
Repo: ohcnetwork/care_fe PR: 14651
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:252-257
Timestamp: 2025-12-05T19:05:40.922Z
Learning: In healthcare components handling discharge status (like EncounterQuestion.tsx), maintainers implement defense-in-depth by adding early-return guards in change handlers (e.g., `if (isDischarged) return;`) even when the UI control is also disabled, to ensure business-critical immutability rules are enforced at multiple layers and protect against edge cases like browser extensions or unexpected UI library behavior.
Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 10289
File: src/components/Medicine/MedicationAdministration/MedicineAdminForm.tsx:325-338
Timestamp: 2025-02-04T07:25:30.683Z
Learning: Calendar components in medication administration forms should include date constraints using the `disabled` prop to prevent selection of dates before encounter start time and future dates.
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Use standard medical component interface patterns with medicalContext, accessibility properties (ariaLabel, screenReaderText), clinical validation callbacks (onValidationError), and medical data properties (patientId, facilityId)
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PermissionContext.tsx : Implement PermissionContext with medical role-based permissions (Doctor, Nurse, Admin, Pharmacist) including patient data access control with dynamic permission checking and facility-level permissions for multi-facility healthcare systems
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/typescript-types.instructions.md:0-0
Timestamp: 2025-11-25T13:53:20.837Z
Learning: Applies to src/types/**/*{medication,dosage,vital}*.{ts,tsx} : Use numeric types with explicit units for dosage validation (e.g., { value: number; unit: 'mg' | 'ml' })
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Ensure medical forms and reports render correctly in print media
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/{Utils,types,providers}/**/*.{ts,tsx} : Document medical data flows, validation requirements, and healthcare workflows with clinical reasoning in API and utility code comments
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Add ARIA labels for critical medical data (patient names, vital signs, medication alerts)
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Implement robust error handling with user-friendly medical context in CAREUI components
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/typescript-types.instructions.md:0-0
Timestamp: 2025-11-25T13:53:20.837Z
Learning: Applies to src/types/emr/**/*.{ts,tsx} : Apply strict validation for medical records types: blood type, allergies, and medications must be properly typed and validated for patient safety
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/lib.instructions.md:0-0
Timestamp: 2025-11-25T13:51:41.208Z
Learning: Applies to src/lib/**/*.{ts,tsx} : Log performance issues affecting patient care
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Implement proper error boundaries in CAREUI components for critical medical data handling
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Maintain proper heading hierarchy for screen reader support in medical records display
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/components/**/*.{ts,tsx} : Include medical use cases, accessibility notes, and WCAG compliance documentation in component documentation
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/typescript-types.instructions.md:0-0
Timestamp: 2025-11-25T13:53:20.837Z
Learning: Applies to src/types/**/*.{ts,tsx} : Define healthcare-specific utility types as union types: EmergencyPriority ('critical' | 'urgent' | 'semi-urgent' | 'non-urgent'), BedStatus, and MedicationRoute
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 13197
File: src/pages/Facility/settings/observationDefinition/ObservationDefinitionForm.tsx:470-495
Timestamp: 2025-09-16T20:46:59.537Z
Learning: In PR #13197, AdityaJ2305 indicated that aria-invalid and ref forwarding improvements for ValueSetSelect components can be deferred to a separate PR, considering them not critical for the current focus/scroll fix implementation.
| <div className="flex justify-between items-center flex-wrap"> | ||
| <QuestionLabel question={question} /> | ||
| <HistoricalRecordSelector< | ||
| MedicationRequestRead | MedicationStatementRead | ||
| > | ||
| title={t("medication_history")} | ||
| structuredTypes={[ | ||
| { | ||
| type: t("past_prescriptions"), | ||
| displayFields: [ | ||
| { | ||
| key: "", | ||
| label: t("medicine"), | ||
| render: (med) => displayMedicationName(med), | ||
| }, | ||
| }, | ||
| { | ||
| key: "dosage_instruction", | ||
| label: t("duration"), | ||
| render: (instructions) => { | ||
| const duration = | ||
| instructions?.[0]?.timing?.repeat?.bounds_duration; | ||
| if (!duration?.value) return "-"; | ||
| return `${duration.value} ${duration.unit}`; | ||
| { | ||
| key: "dosage_instruction", | ||
| label: t("dosage"), | ||
| render: (instructions) => { | ||
| const dosage = formatDosage(instructions[0]) || ""; | ||
| const frequency = | ||
| getFrequencyDisplay(instructions[0]?.timing)?.meaning || | ||
| "-"; | ||
| return `${dosage}\n${frequency}`; | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| key: "created_by", | ||
| label: t("prescribed_by"), | ||
| render: (created_by) => ( | ||
| <div className="flex items-center gap-2"> | ||
| <Avatar | ||
| imageUrl={created_by?.profile_picture_url} | ||
| name={formatName(created_by, true)} | ||
| className="size-6 rounded-full" | ||
| /> | ||
| <span className="text-sm truncate"> | ||
| {formatName(created_by)} | ||
| </span> | ||
| </div> | ||
| ), | ||
| }, | ||
| ], | ||
| expandableFields: [ | ||
| { | ||
| key: "dosage_instruction", | ||
| label: t("instructions"), | ||
| render: (instructions) => | ||
| instructions?.[0]?.additional_instruction?.[0]?.display, | ||
| }, | ||
| { | ||
| key: "note", | ||
| label: t("notes"), | ||
| render: (note) => note, | ||
| }, | ||
| ], | ||
| queryKey: ["medication_requests", patientId], | ||
| queryFn: async ( | ||
| limit: number, | ||
| offset: number, | ||
| signal: AbortSignal, | ||
| ) => { | ||
| const response = await query(medicationRequestApi.list, { | ||
| pathParams: { patientId }, | ||
| queryParams: { | ||
| limit, | ||
| offset, | ||
| status: | ||
| "active,on_hold,draft,unknown,ended,completed,cancelled", | ||
| { | ||
| key: "dosage_instruction", | ||
| label: t("duration"), | ||
| render: (instructions) => { | ||
| const duration = | ||
| instructions?.[0]?.timing?.repeat?.bounds_duration; | ||
| if (!duration?.value) return "-"; | ||
| return `${duration.value} ${duration.unit}`; | ||
| }, | ||
| }, | ||
| })({ signal }); | ||
| return response as PaginatedResponse<MedicationRequestRead>; | ||
| }, | ||
| }, | ||
| { | ||
| type: t("medication_statements"), | ||
| displayFields: [ | ||
| { | ||
| key: "medication", | ||
| label: t("medicine"), | ||
| render: (med) => med?.display, | ||
| }, | ||
| { | ||
| key: "dosage_text", | ||
| label: t("dosage_instruction"), | ||
| render: (dosage) => dosage, | ||
| }, | ||
| { | ||
| key: "status", | ||
| label: t("status"), | ||
| render: (status: string) => t(`medication_status__${status}`), | ||
| }, | ||
| { | ||
| key: "created_by", | ||
| label: t("prescribed_by"), | ||
| render: (created_by) => ( | ||
| <div className="flex items-center gap-2"> | ||
| <Avatar | ||
| imageUrl={created_by?.profile_picture_url} | ||
| name={formatName(created_by, true)} | ||
| className="size-6 rounded-full" | ||
| /> | ||
| <span className="text-sm truncate"> | ||
| {formatName(created_by)} | ||
| </span> | ||
| </div> | ||
| ), | ||
| }, | ||
| ], | ||
| expandableFields: [ | ||
| { | ||
| key: "note", | ||
| label: t("notes"), | ||
| render: (note) => note, | ||
| { | ||
| key: "created_by", | ||
| label: t("prescribed_by"), | ||
| render: (created_by) => ( | ||
| <div className="flex items-center gap-2"> | ||
| <Avatar | ||
| imageUrl={created_by?.profile_picture_url} | ||
| name={formatName(created_by, true)} | ||
| className="size-6 rounded-full" | ||
| /> | ||
| <span className="text-sm truncate"> | ||
| {formatName(created_by)} | ||
| </span> | ||
| </div> | ||
| ), | ||
| }, | ||
| ], | ||
| expandableFields: [ | ||
| { | ||
| key: "dosage_instruction", | ||
| label: t("instructions"), | ||
| render: (instructions) => | ||
| instructions?.[0]?.additional_instruction?.[0]?.display, | ||
| }, | ||
| { | ||
| key: "note", | ||
| label: t("notes"), | ||
| render: (note) => note, | ||
| }, | ||
| ], | ||
| queryKey: ["medication_requests", patientId], | ||
| queryFn: async ( | ||
| limit: number, | ||
| offset: number, | ||
| signal: AbortSignal, | ||
| ) => { | ||
| const response = await query(medicationRequestApi.list, { | ||
| pathParams: { patientId }, | ||
| queryParams: { | ||
| limit, | ||
| offset, | ||
| status: | ||
| "active,on_hold,draft,unknown,ended,completed,cancelled", | ||
| }, | ||
| })({ signal }); | ||
| return response as PaginatedResponse<MedicationRequestRead>; | ||
| }, | ||
| ], | ||
| queryKey: ["medication_statements", patientId], | ||
| queryFn: async ( | ||
| limit: number, | ||
| offset: number, | ||
| signal: AbortSignal, | ||
| ) => { | ||
| const response = await query(medicationStatementApi.list, { | ||
| pathParams: { patientId }, | ||
| queryParams: { | ||
| limit, | ||
| offset, | ||
| status: | ||
| "active,on_hold,completed,stopped,unknown,not_taken,intended", | ||
| }, | ||
| { | ||
| type: t("medication_statements"), | ||
| displayFields: [ | ||
| { | ||
| key: "medication", | ||
| label: t("medicine"), | ||
| render: (med) => med?.display, | ||
| }, | ||
| { | ||
| key: "dosage_text", | ||
| label: t("dosage_instruction"), | ||
| render: (dosage) => dosage, | ||
| }, | ||
| { | ||
| key: "status", | ||
| label: t("status"), | ||
| render: (status: string) => t(`medication_status__${status}`), | ||
| }, | ||
| })({ signal }); | ||
| return response as PaginatedResponse<MedicationStatementRead>; | ||
| { | ||
| key: "created_by", | ||
| label: t("prescribed_by"), | ||
| render: (created_by) => ( | ||
| <div className="flex items-center gap-2"> | ||
| <Avatar | ||
| imageUrl={created_by?.profile_picture_url} | ||
| name={formatName(created_by, true)} | ||
| className="size-6 rounded-full" | ||
| /> | ||
| <span className="text-sm truncate"> | ||
| {formatName(created_by)} | ||
| </span> | ||
| </div> | ||
| ), | ||
| }, | ||
| ], | ||
| expandableFields: [ | ||
| { | ||
| key: "note", | ||
| label: t("notes"), | ||
| render: (note) => note, | ||
| }, | ||
| ], | ||
| queryKey: ["medication_statements", patientId], | ||
| queryFn: async ( | ||
| limit: number, | ||
| offset: number, | ||
| signal: AbortSignal, | ||
| ) => { | ||
| const response = await query(medicationStatementApi.list, { | ||
| pathParams: { patientId }, | ||
| queryParams: { | ||
| limit, | ||
| offset, | ||
| status: | ||
| "active,on_hold,completed,stopped,unknown,not_taken,intended", | ||
| }, | ||
| })({ signal }); | ||
| return response as PaginatedResponse<MedicationStatementRead>; | ||
| }, | ||
| }, | ||
| }, | ||
| ]} | ||
| buttonLabel={t("medication_history")} | ||
| onAddSelected={handleAddHistoricalMedications} | ||
| disableAPI={isPreview} | ||
| /> | ||
| ]} | ||
| buttonLabel={t("medication_history")} | ||
| onAddSelected={handleAddHistoricalMedications} | ||
| disableAPI={isPreview} | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's find the type definitions for MedicationStatementRead and MedicationRequestRead
fd -t f "\.ts$" -p "src/types" | xargs rg -l "MedicationStatementRead|MedicationRequestRead" | head -20Repository: ohcnetwork/care_fe
Length of output: 310
🏁 Script executed:
# Look for the formatDosage function
rg -t ts "function formatDosage|const formatDosage" --max-count=5Repository: ohcnetwork/care_fe
Length of output: 174
🏁 Script executed:
# Check the MedicationStatementQuestion file to understand the structure
wc -l src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsxRepository: ohcnetwork/care_fe
Length of output: 140
🏁 Script executed:
# Get the imports and type definitions from MedicationStatementQuestion.tsx
head -50 src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsxRepository: ohcnetwork/care_fe
Length of output: 1955
🏁 Script executed:
# Search for displayMedicationName function
rg -t ts "displayMedicationName" -B 2 -A 8 | head -40Repository: ohcnetwork/care_fe
Length of output: 3973
🏁 Script executed:
# Check the medicationRequest type definition
cat -n src/types/emr/medicationRequest/medicationRequest.ts | head -100Repository: ohcnetwork/care_fe
Length of output: 2923
🏁 Script executed:
# Check displayMedicationName implementation
rg -t ts "displayMedicationName" -A 5 "src/types/emr/medicationRequest/medicationRequest.ts"Repository: ohcnetwork/care_fe
Length of output: 210
🏁 Script executed:
# Check medicationStatement type definition
cat -n src/types/emr/medicationStatement.tsRepository: ohcnetwork/care_fe
Length of output: 2694
🏁 Script executed:
# Check formatDosage implementation
cat -n src/components/Medicine/utils.tsRepository: ohcnetwork/care_fe
Length of output: 4793
🏁 Script executed:
# Check the full medicationRequest type definition to see dosage_instruction
cat -n src/types/emr/medicationRequest/medicationRequest.ts | grep -A 200 "type MedicationRequestRead"Repository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Check displayMedicationName full implementation
rg -t ts "export function displayMedicationName" -A 20 "src/types/emr/medicationRequest/medicationRequest.ts"Repository: ohcnetwork/care_fe
Length of output: 603
🏁 Script executed:
# Check how the HistoricalRecordSelector passes data to render functions
rg -t tsx "HistoricalRecordSelector" -B 5 -A 15 "src/components/HistoricalRecordSelector" | head -80Repository: ohcnetwork/care_fe
Length of output: 89
🏁 Script executed:
# Find and examine the HistoricalRecordSelector component
fd -t f "HistoricalRecordSelector" src/components/ | head -5Repository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Look at the MedicationRequestRead type more carefully
rg -t ts "MedicationRequestRead" -A 30 "src/types/emr/medicationRequest/medicationRequest.ts" | head -80Repository: ohcnetwork/care_fe
Length of output: 1486
🏁 Script executed:
# Check dosage_instruction in MedicationRequest types
rg -t ts "dosage_instruction" "src/types/emr/medicationRequest/medicationRequest.ts" -B 2 -A 2Repository: ohcnetwork/care_fe
Length of output: 549
🏁 Script executed:
# Check the Code type definition
cat -n src/types/base/code/code.tsRepository: ohcnetwork/care_fe
Length of output: 1636
🏁 Script executed:
# Look at how medication statements use the medication field in the render
rg -t ts "MedicationStatementRead" -B 5 -A 10 "src/types/emr/medicationStatement" | grep -A 10 "medication"Repository: ohcnetwork/care_fe
Length of output: 1433
🏁 Script executed:
# Check line 358 in the MedicationStatementQuestion to see the render function for medication statements
sed -n '350,370p' src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsxRepository: ohcnetwork/care_fe
Length of output: 1013
🏁 Script executed:
# Check the MedicationRequestDosageInstruction type definition
rg -t ts "type MedicationRequestDosageInstruction|interface MedicationRequestDosageInstruction" -A 15 "src/types/emr/medicationRequest"Repository: ohcnetwork/care_fe
Length of output: 1441
🏁 Script executed:
# Verify if formatDosage handles undefined gracefully
rg -t ts "export function formatDosage" -A 10 "src/components/Medicine/utils.ts"Repository: ohcnetwork/care_fe
Length of output: 519
🏁 Script executed:
# Check how HistoricalRecordSelector passes data to render functions - look at the component file
fd -t f "HistoricalRecordSelector.tsx" src/Repository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Search for HistoricalRecordSelector component
find src/components -name "*HistoricalRecordSelector*" -type fRepository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Look for the actual HistoricalRecordSelector component
rg -t ts "export.*HistoricalRecordSelector" "src/components" -B 2 -A 30 | head -100Repository: ohcnetwork/care_fe
Length of output: 2725
🏁 Script executed:
# Check line 330-340 to see the exact render function for "past_prescriptions"
sed -n '330,350p' src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsxRepository: ohcnetwork/care_fe
Length of output: 838
🏁 Script executed:
# Look at the HistoricalRecordSelector to understand how it passes data to render functions
cat -n src/components/HistoricalRecordSelector/index.tsx | sed -n '1,150p'Repository: ohcnetwork/care_fe
Length of output: 5106
🏁 Script executed:
# Check how the render function receives the field data
rg -t ts "render\(.*\)" "src/components/HistoricalRecordSelector/index.tsx" -B 5 -A 10 | head -80Repository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Check TreatmentSummary.tsx to see the pattern mentioned in learnings
sed -n '515,535p' src/components/Patient/TreatmentSummary.tsxRepository: ohcnetwork/care_fe
Length of output: 860
🏁 Script executed:
# Look at RecordItem component to understand how data is passed to render
cat -n src/components/HistoricalRecordSelector/RecordItem.tsxRepository: ohcnetwork/care_fe
Length of output: 5586
🏁 Script executed:
# Check what the actual structure is - look for how displayFields render function is called
rg -t ts "render\(" "src/components/HistoricalRecordSelector" -B 3 -A 3Repository: ohcnetwork/care_fe
Length of output: 2292
🏁 Script executed:
# Let me check what happens when instructions is undefined in MedicationRequestRead
rg -t ts "dosage_instruction" "src/types/emr/medicationRequest/medicationRequest.ts" -B 1 -A 1 | grep -A 2 "MedicationRequestRead"Repository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Check if Code display is truly required or optional in practice
rg -t ts "display\?" "src/types/base/code/code.ts"Repository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Check if dosage_instruction can ever be empty or undefined in MedicationRequestRead
rg -t ts "dosage_instruction\s*:" "src/types/emr/medicationRequest/medicationRequest.ts" -A 1 -B 1Repository: ohcnetwork/care_fe
Length of output: 387
🏁 Script executed:
# Look at actual usage - check if there are any guards against empty instructions
rg -t ts "instructions\[0\]" "src/components" -B 2 -A 2 | head -40Repository: ohcnetwork/care_fe
Length of output: 1808
🏁 Script executed:
# Check the exact line where the crash would happen
sed -n '338,345p' src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsxRepository: ohcnetwork/care_fe
Length of output: 424
🏁 Script executed:
# Verify that dosage_instruction is truly required (not optional) in MedicationRequestRead
sed -n '115,150p' src/types/emr/medicationRequest/medicationRequest.ts | grep -A 3 "interface MedicationRequestRead"Repository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Check if there are other components that handle empty dosage_instruction arrays
rg -t ts "instructions\?\[" "src/components" -B 1 -A 1Repository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Double-check MedicationStatementRead.medication type to see if it's a Code or something else
sed -n '71,85p' src/types/emr/medicationStatement.tsRepository: ohcnetwork/care_fe
Length of output: 459
🏁 Script executed:
# Check if there are any examples in codebase showing defensive rendering of Code objects
rg -t ts "display \?\?" "src/components" -B 2 -A 2 | head -30Repository: ohcnetwork/care_fe
Length of output: 3243
🏁 Script executed:
# Check if dosage_instruction can be typed as potentially empty elsewhere
rg -t ts "dosage_instruction\s*\?:" "src/types" -B 1 -A 1Repository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Check if there's any validation that dosage_instruction must have at least one element
rg -t ts "dosage_instruction\.length|dosage_instruction\?" "src/components" | head -20Repository: ohcnetwork/care_fe
Length of output: 44
🏁 Script executed:
# Look at the actual render implementation to confirm the line break issue
sed -n '338,348p' src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsxRepository: ohcnetwork/care_fe
Length of output: 518
🏁 Script executed:
# Check if displayMedicationName handles MedicationStatementRead correctly
rg -t ts "displayMedicationName" -A 25 "src/types/emr/medicationRequest/medicationRequest.ts" | head -40Repository: ohcnetwork/care_fe
Length of output: 675
Guard against empty dosage_instruction array (will crash at runtime).
When instructions is an empty array, instructions[0] is undefined, and passing it to formatDosage() crashes because it immediately accesses instruction.dose_and_rate without null checks. The render function should check if instructions?.[0] exists before calling formatDosage().
Also, render MedicationStatement medicine defensively as med?.display ?? med?.code ?? "-" to handle fallback to the code when display is missing, following the pattern used elsewhere in the codebase.
Proposed fix
- render: (instructions) => {
- const dosage = formatDosage(instructions[0]) || "";
- const frequency =
- getFrequencyDisplay(instructions[0]?.timing)?.meaning ||
- "-";
- return `${dosage}\n${frequency}`;
+ render: (instructions) => {
+ const first = instructions?.[0];
+ if (!first) return "-";
+ const dosage = formatDosage(first) || "-";
+ const frequency = getFrequencyDisplay(first.timing)?.meaning || "-";
+ return <div className="whitespace-pre-line">{`${dosage}\n${frequency}`}</div>;
+ },For MedicationStatement medicine (line ~359):
- render: (med) => med?.display,
+ render: (med) => med?.display ?? med?.code ?? "-",🤖 Prompt for AI Agents
In @src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
around lines 323 - 472, The render for dosage and duration can crash when
instructions is an empty array: guard by checking instructions?.[0] exists
before calling formatDosage and accessing timing/repeat (use a local const instr
= instructions?.[0]; const dosage = instr ? formatDosage(instr) : ""; const
frequency = instr ? getFrequencyDisplay(instr?.timing)?.meaning ?? "-" : "-";
similarly check instr?.timing?.repeat?.bounds_duration before using value), and
update the MedicationStatement medicine render to be defensive (use med?.display
?? med?.code ?? "-") to match the codebase pattern; adjust the render functions
in the structuredTypes block that reference formatDosage, getFrequencyDisplay
and medication rendering accordingly.
There was a problem hiding this comment.
not related to this PR, those lines changed because of formatting
There was a problem hiding this comment.
@yash-learner, you're absolutely right! My apologies for the noise. The code I flagged in those render functions pre-existed and was only re-indented due to the wrapping—the logic itself wasn't changed by this PR.
The issues I raised (empty array guards and defensive rendering) are pre-existing concerns in the codebase, not introduced by your changes. Since this PR is focused on the layout change (adding the inline QuestionLabel), those are out of scope here.
Thanks for the clarification! 🐰
🧠 Learnings used
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 14348
File: src/components/Patient/TreatmentSummary.tsx:523-523
Timestamp: 2025-11-14T14:26:31.165Z
Learning: In TreatmentSummary.tsx, medication statements (from medicationStatementApi) only contain SNOMED-coded medications and use `medication.medication.display ?? medication.medication.code` pattern, whereas medication requests (from medicationRequestApi) can have either SNOMED codes or inventory products and should use `displayMedicationName()` helper function to correctly handle both cases.
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PatientContext.tsx : Implement Patient Context for current patient selection and medical alerts
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/providers.instructions.md:0-0
Timestamp: 2025-11-25T13:52:33.081Z
Learning: Applies to src/Providers/**/*HistoryAPIProvider*{.ts,.tsx} : HistoryAPIProvider should manage navigation history for clinical workflows
Learnt from: pratyush07-hub
Repo: ohcnetwork/care_fe PR: 14651
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:252-257
Timestamp: 2025-12-05T19:05:40.922Z
Learning: In healthcare components handling discharge status (like EncounterQuestion.tsx), maintainers implement defense-in-depth by adding early-return guards in change handlers (e.g., `if (isDischarged) return;`) even when the UI control is also disabled, to ensure business-critical immutability rules are enforced at multiple layers and protect against edge cases like browser extensions or unexpected UI library behavior.
Learnt from: rithviknishad
Repo: ohcnetwork/care_fe PR: 10289
File: src/components/Medicine/MedicationAdministration/MedicineAdminForm.tsx:325-338
Timestamp: 2025-02-04T07:25:30.683Z
Learning: Calendar components in medication administration forms should include date constraints using the `disabled` prop to prevent selection of dates before encounter start time and future dates.
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Use standard medical component interface patterns with medicalContext, accessibility properties (ariaLabel, screenReaderText), clinical validation callbacks (onValidationError), and medical data properties (patientId, facilityId)
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Maintain proper heading hierarchy for screen reader support in medical records display
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/typescript-types.instructions.md:0-0
Timestamp: 2025-11-25T13:53:20.837Z
Learning: Applies to src/types/**/*{medication,dosage,vital}*.{ts,tsx} : Use numeric types with explicit units for dosage validation (e.g., { value: number; unit: 'mg' | 'ml' })
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Ensure medical forms and reports render correctly in print media
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/{Utils,types,providers}/**/*.{ts,tsx} : Document medical data flows, validation requirements, and healthcare workflows with clinical reasoning in API and utility code comments
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Add ARIA labels for critical medical data (patient names, vital signs, medication alerts)
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/*.{ts,tsx} : Include proper error boundaries for medical data in context implementations
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/lib.instructions.md:0-0
Timestamp: 2025-11-25T13:51:41.208Z
Learning: Applies to src/lib/**/*.{ts,tsx} : Log performance issues affecting patient care
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/typescript-types.instructions.md:0-0
Timestamp: 2025-11-25T13:53:20.837Z
Learning: Applies to src/types/emr/**/*.{ts,tsx} : Apply strict validation for medical records types: blood type, allergies, and medications must be properly typed and validated for patient safety
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Implement proper error boundaries in CAREUI components for critical medical data handling
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 10563
File: src/components/Medicine/MedicationsTable.tsx:75-105
Timestamp: 2025-02-21T08:09:05.237Z
Learning: In the MedicationsTable component, the data transformation logic for print preview and regular table views is intentionally kept separate as they will handle arrays differently in future implementations.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx:
- Line 549: The flex container div currently rendered as <div className="flex
justify-between items-center flex-wrap"> should include a gap utility to ensure
spacing when its children (QuestionLabel and HistoricalRecordSelector) wrap;
update the className to include either "gap-2" or "gap-4" (e.g., className="flex
justify-between items-center flex-wrap gap-2") so wrapped elements maintain
consistent spacing.
📜 Review details
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
🧰 Additional context used
📓 Path-based instructions (12)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: Write concise, technical TypeScript code with accurate examples
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use TanStack Query for data fetching from the API along with query and mutate utilities for the queryFn and mutationFn
Use raviger for routing
**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Useinterfacefor defining object types in TypeScript
Avoid explicitanytype in TypeScript
Use proper nullability annotations in TypeScript types
Use dedicated error handlers and TypeScript strict null checks
**/*.{ts,tsx}: Use TypeScript for all new code
Prefer interfaces over types for object definitions in TypeScript
Avoid usinganytype; use proper type definitions in TypeScript
Use type inference where possible in TypeScript
Use TanStack Query for API data management
Prefer React Context for global state management
**/*.{ts,tsx}: Use TanStack Query with thequeryandmutateutilities from@/Utils/request/
Use appropriate query keys following the resource pattern for TanStack Query
Leverage TanStack Query built-in features for pagination and debouncing
Implement proper error handling using the global error handler for TanStack Query operations
UseuseQueryhook withqueryKeyandqueryFnparameters, wherequeryFnwraps the API route with thequery()utility
UseuseMutationhook withmutationFnparameter wrapping API routes with themutate()utility, and implementonSuccesscallbacks to invalidate related queries
Support path parameters in TanStack Query using thepathParamsoption in query/mutate utilities
Support query parameters in TanStack Query using thequeryParamsoption in query/mutate utilities
Use thesilent: trueoption to suppress global error notifications when custom error handling is needed
**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Useinterfacefor defining object types
Avoid explicitanytypes and maint...
Files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
**/*.{ts,tsx,js,jsx}: Use path aliases for imports from src (@/*)
Use double quotes for strings
Semicolons are required at end of statements
Order imports as: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names
**/*.{ts,tsx,js,jsx}: Use path aliases@/*for imports from src directory
Use double quotes for strings
Require semicolons at end of statements
Order imports: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names
Files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
Use declarative JSX
Files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{ts,tsx}: Use strict TypeScript configuration for medical data safety in all TypeScript source files
All literal strings must use i18next for multi-language support in healthcare interfaces
Use comprehensive error boundaries and user-friendly error messages for medical workflow debugging without exposing PHI
Follow ESLint configured rules for React hooks, accessibility, and code quality
Use @tanstack/react-query for server state management in API client code
Localize date and time formats for medical timestamps using locale-aware formatting functions
Use date-fns for date handling and manipulation with locale awareness for medical timestamps
Files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/components/**/*.{ts,tsx}: Implement WCAG 2.1 AA accessibility compliance in medical applications with screen reader compatibility and keyboard navigation
Include medical use cases, accessibility notes, and WCAG compliance documentation in component documentation
Follow established React component patterns and folder structure organized by feature and domain
src/components/**/*.{ts,tsx}: Use path aliases:@/components/,@/types/,@/lib/,@/pages/for imports
Follow import order: External packages →@/components/ui/→@/components/→@/CAREUI/→@/types/→@/lib/→ relative imports
Use named exports fromlucide-reactfor icons (e.g.,import { SettingsIcon } from "lucide-react")
ImportuseTranslationfromreact-i18nextfor internationalization
Use React 19.1.1 hooks pattern - Functional components only
Always define TypeScript Props interfaces (e.g., PatientInfoCardProps) for component props
Use handle prefix for event handlers (e.g., handleSubmit, handleTagsUpdate, handlePatientSelect)
Use shadcn/ui components as primary UI system (Button, Card, Badge, etc.) from@/components/ui/
Use healthcare-specific CAREUI custom components (Calendar, WeekdayCheckbox, Zoom) from@/CAREUI/
UsebuttonVariantsfrom@/components/ui/buttonwith CVA patterns for button styling
Follow<Card><CardHeader>pattern for consistent card layouts
UsePatientReadtype from@/types/emr/patient/patientfor patient data handling
ImplementTagAssignmentSheetwithTagEntityTypefor patient/facility tags
UsePatientHoverCardfor patient info overlays
Use Badge components to display patient status, facility capacity, medication dosage with color variants
Usecva()from class variance authority for variant-based component styling
Usecn()from@/lib/utilsfor conditional class composition
Follow Tailwind CSS 4.1.3 color system: primary-700, gray-900, red-500 pattern with dark mode variants
Use Tailwind shadow system: shadow-sm, shadow-xs for el...
Files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
src/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Prettier for consistent code formatting across the healthcare application
Files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
src/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{tsx,ts}: Use React 19.1.1 features and patterns following React 19 Documentation for healthcare application development
Use shadcn/ui as primary component system and CAREUI for healthcare-specific components
Use framer-motion for animations in healthcare UI interfaces
Files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
src/**/*.{tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Tailwind CSS 4.1.3 utility classes with custom healthcare-specific design system for styling
Files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Use 2-space indentation
Files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
**/*.tsx: Use functional components with proper type definitions in React
One component per file is preferred
Prefer default exports for React components
Follow the component naming pattern:ComponentName.tsxfor React components
Use Tailwind CSS for styling
Use Shadcn UI components when available
Use local state for component-specific data
Use PascalCase for component file names (e.g.,AuthWizard.tsx)
Files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursor/rules/04-ui-components.mdc)
**/*.{tsx,ts}: Use Shadcn UI components as the primary component library
Follow the component documentation for proper usage
Customize components using Tailwind CSS
UsenavigateanduseRedirectfrom raviger for navigation and redirects
Use Tailwind's responsive classes and follow mobile-first approach
Implement proper ARIA attributes for accessibility
Ensure keyboard navigation works in components
Define component props using TypeScript interfaces
Use translation keys fromsrc/Locale/for internationalization
Support RTL languages in components
Use proper date/time formatting for multiple language support
Files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
**/*.{ts,tsx,js,jsx,json,css,scss,html}
📄 CodeRabbit inference engine (AGENTS.md)
Use 2-space indentation
Files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
🧠 Learnings (25)
📓 Common learnings
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 13197
File: src/pages/Facility/settings/observationDefinition/ObservationDefinitionForm.tsx:470-495
Timestamp: 2025-09-16T20:46:59.537Z
Learning: In PR #13197, AdityaJ2305 indicated that aria-invalid and ref forwarding improvements for ValueSetSelect components can be deferred to a separate PR, considering them not critical for the current focus/scroll fix implementation.
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Add ARIA labels for critical medical data (patient names, vital signs, medication alerts)
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Use standard medical component interface patterns with medicalContext, accessibility properties (ariaLabel, screenReaderText), clinical validation callbacks (onValidationError), and medical data properties (patientId, facilityId)
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Add ARIA labels for critical medical data (patient names, vital signs, medication alerts)
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Use standard medical component interface patterns with medicalContext, accessibility properties (ariaLabel, screenReaderText), clinical validation callbacks (onValidationError), and medical data properties (patientId, facilityId)
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-11-25T13:54:35.875Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .cursor/rules/04-ui-components.mdc:0-0
Timestamp: 2025-11-25T13:54:35.875Z
Learning: Applies to **/*.{tsx,ts} : Use Tailwind's responsive classes and follow mobile-first approach
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-11-25T13:49:43.065Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T13:49:43.065Z
Learning: Applies to components/**/*.{ts,tsx} : Implement responsive design with Tailwind CSS; use a mobile-first approach
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-08-26T06:35:18.610Z
Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13514
File: src/pages/Facility/settings/billing/discount/discount-components/DiscountComponentSettings.tsx:111-119
Timestamp: 2025-08-26T06:35:18.610Z
Learning: In src/pages/Facility/settings/billing/discount/discount-components/DiscountComponentSettings.tsx, the Input component uses className="w-full lg:w-[250px]" instead of matching the Discount Codes section's lg:w-[300px] due to specific responsiveness issues on medium screen sizes.
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2024-11-06T18:12:29.794Z
Learnt from: modamaan
Repo: ohcnetwork/care_fe PR: 8954
File: src/components/Shifting/ShiftDetails.tsx:432-433
Timestamp: 2024-11-06T18:12:29.794Z
Learning: In `src/components/Shifting/ShiftDetails.tsx`, the `print` button is inside the `PrintPreview` component and the `close` button is outside, so aligning them with flexbox within the same container isn't feasible.
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-11-25T13:52:19.758Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/pages.instructions.md:0-0
Timestamp: 2025-11-25T13:52:19.758Z
Learning: Handle responsive design considerations in page components
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-08-30T17:02:51.723Z
Learnt from: Denyme24
Repo: ohcnetwork/care_fe PR: 13567
File: src/components/ui/autocomplete.tsx:252-253
Timestamp: 2025-08-30T17:02:51.723Z
Learning: In the autocomplete component (src/components/ui/autocomplete.tsx), removing -translate-y-1/2 from the CaretSortIcon className fixes vertical alignment issues. Adding -translate-y-1/2 causes misalignment in this specific component context.
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-01-20T09:46:46.025Z
Learnt from: rajku-dev
Repo: ohcnetwork/care_fe PR: 10047
File: src/components/Files/FilesTab.tsx:580-580
Timestamp: 2025-01-20T09:46:46.025Z
Learning: In FileUploadDialog, using `max-w-fit` on the dialog content is acceptable when the internal content (like filenames) is already constrained with classes like `max-w-xs` and `truncate`.
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-07-28T02:23:56.377Z
Learnt from: areebahmeddd
Repo: ohcnetwork/care_fe PR: 13105
File: .github/workflows/pr-checklist.yml:49-55
Timestamp: 2025-07-28T02:23:56.377Z
Learning: In the ohcnetwork/care_fe repository's PR checklist workflow (.github/workflows/pr-checklist.yml), the team prefers a progressive enforcement model where PRs stay open as long as any checklist item is checked, rather than requiring all items to be completed. This allows for incremental progress on checklists while still closing PRs that show no checklist engagement.
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-12-05T19:05:40.922Z
Learnt from: pratyush07-hub
Repo: ohcnetwork/care_fe PR: 14651
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:252-257
Timestamp: 2025-12-05T19:05:40.922Z
Learning: In healthcare components handling discharge status (like EncounterQuestion.tsx), maintainers implement defense-in-depth by adding early-return guards in change handlers (e.g., `if (isDischarged) return;`) even when the UI control is also disabled, to ensure business-critical immutability rules are enforced at multiple layers and protect against edge cases like browser extensions or unexpected UI library behavior.
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-09-16T20:46:59.537Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 13197
File: src/pages/Facility/settings/observationDefinition/ObservationDefinitionForm.tsx:470-495
Timestamp: 2025-09-16T20:46:59.537Z
Learning: In PR #13197, AdityaJ2305 indicated that aria-invalid and ref forwarding improvements for ValueSetSelect components can be deferred to a separate PR, considering them not critical for the current focus/scroll fix implementation.
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Ensure keyboard navigation is supported for clinical workflows and emergency situations
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Ensure CAREUI components work on older medical devices through progressive enhancement
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Use `PatientRead` type from `@/types/emr/patient/patient` for patient data handling
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Type definitions for medical data structures must follow typescript-types.instructions.md
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-11-25T13:53:20.837Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/typescript-types.instructions.md:0-0
Timestamp: 2025-11-25T13:53:20.837Z
Learning: Applies to src/types/**/*Response*.{ts,tsx} : API response types should follow pagination patterns: include count, next, previous, and results array for medical records lists
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-11-25T13:53:20.837Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/typescript-types.instructions.md:0-0
Timestamp: 2025-11-25T13:53:20.837Z
Learning: Applies to src/types/**/*Form*.{ts,tsx} : Medical form type patterns should organize related fields into logical nested object groups: personalInfo, medicalHistory, insuranceInfo for patient admission forms
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/PatientContext.tsx : Implement Patient Context for current patient selection and medical alerts
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-11-25T13:52:51.914Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/react-components.instructions.md:0-0
Timestamp: 2025-11-25T13:52:51.914Z
Learning: Applies to src/components/**/*.{ts,tsx} : Maintain proper heading hierarchy for screen reader support in medical records display
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-11-25T13:52:33.081Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/providers.instructions.md:0-0
Timestamp: 2025-11-25T13:52:33.081Z
Learning: Applies to src/Providers/**/*HistoryAPIProvider*{.ts,.tsx} : HistoryAPIProvider should manage navigation history for clinical workflows
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-05-19T16:41:44.446Z
Learnt from: hrit2773
Repo: ohcnetwork/care_fe PR: 11922
File: cypress/pageObject/Patients/PatientEncounter.ts:140-164
Timestamp: 2025-05-19T16:41:44.446Z
Learning: The PatientEncounter class in Cypress tests intentionally uses different element targeting strategies: `position: "first"` for allergies and `position: "last"` for symptoms and diagnoses, reflecting the different UI behaviors of these components.
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-12-17T19:47:58.152Z
Learnt from: AdityaJ2305
Repo: ohcnetwork/care_fe PR: 14821
File: src/components/Location/LocationNavigation.tsx:161-163
Timestamp: 2025-12-17T19:47:58.152Z
Learning: To ensure the remove-unused-i18n.js cleanup script detects i18n keys, avoid wrapping keys inside a ternary expression passed directly to t(). Instead, call t() separately in each branch of a conditional, e.g. condition ? t("key1") : t("key2"), or compute the key in a variable before passing to t(). For LocationNavigation.tsx (and similar TSX files in the repo), prefer explicit separate i18n calls per branch or a shared precomputed key to guarantee all keys are statically detectable by the script.
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
📚 Learning: 2025-12-22T10:16:36.690Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 14804
File: src/pages/Facility/services/pharmacy/DispensesView.tsx:117-135
Timestamp: 2025-12-22T10:16:36.690Z
Learning: In the care_fe repository, prefer the native HTML title attribute for simple tooltips over using shadcn/ui Tooltip components. Use Tooltip components only when the tooltip requires richer content, interactivity, or accessibility enhancements that cannot be achieved with a plain title. For simple cases, add a title attribute to the element (e.g., <span title="...">). If a Tooltip is used, ensure it is accessible and necessary, and avoid duplicating content available in the title attribute.
Applied to files:
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
🧬 Code graph analysis (1)
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx (4)
src/types/questionnaire/question.ts (1)
Question(126-158)src/types/base/code/code.ts (1)
Code(19-23)src/Utils/utils.ts (1)
formatName(54-75)src/Utils/request/query.ts (1)
query(87-94)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: CodeQL-Build
- GitHub Check: Test
🔇 Additional comments (3)
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx (3)
49-49: LGTM: Imports and prop additions are correct.The QuestionLabel import, Question type import, and question prop addition properly extend the component to support the inline label layout as per PR objectives.
Also applies to: 77-77, 89-89, 352-352
641-656: LGTM: AbortSignal correctly handled in queryFn.The queryFn properly receives and forwards the AbortSignal to the query utility, enabling proper request cancellation when the component unmounts or the query is invalidated. This follows best practices for TanStack Query and prevents potential memory leaks.
550-550: Add ARIA attributes to QuestionLabel for accessible diagnosis labeling.The QuestionLabel component lacks proper ARIA attributes required for screen reader accessibility of medical data. Specifically:
- Add
aria-required="true"whenquestion.requiredis true (currently only indicated visually with a red asterisk)- Add
aria-labelwith medical context (e.g., "Diagnosis, required field") to ensure screen readers announce the field's purpose and criticality- Add
aria-describedbyfor unit codes if presentSince diagnoses are critical medical data, these accessibility attributes are essential for WCAG 2.1 AA compliance and screen reader support per coding guidelines.
⛔ Skipped due to learnings
Learnt from: CR Repo: ohcnetwork/care_fe PR: 0 File: .github/instructions/react-components.instructions.md:0-0 Timestamp: 2025-11-25T13:52:51.914Z Learning: Applies to src/components/**/*.{ts,tsx} : Add ARIA labels for critical medical data (patient names, vital signs, medication alerts)Learnt from: CR Repo: ohcnetwork/care_fe PR: 0 File: .github/instructions/careui.instructions.md:0-0 Timestamp: 2025-11-25T13:50:46.407Z Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Implement comprehensive screen reader support - All medical data must be accessible via assistive technology with proper ARIA labels for medical context and urgencyLearnt from: CR Repo: ohcnetwork/care_fe PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-25T13:50:10.786Z Learning: Applies to src/components/**/*.{ts,tsx} : Implement WCAG 2.1 AA accessibility compliance in medical applications with screen reader compatibility and keyboard navigationLearnt from: CR Repo: ohcnetwork/care_fe PR: 0 File: .cursor/rules/04-ui-components.mdc:0-0 Timestamp: 2025-11-25T13:54:35.875Z Learning: Applies to **/*.{tsx,ts} : Implement proper ARIA attributes for accessibilityLearnt from: CR Repo: ohcnetwork/care_fe PR: 0 File: .github/instructions/careui.instructions.md:0-0 Timestamp: 2025-11-25T13:50:46.407Z Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Use standard medical component interface patterns with medicalContext, accessibility properties (ariaLabel, screenReaderText), clinical validation callbacks (onValidationError), and medical data properties (patientId, facilityId)Learnt from: CR Repo: ohcnetwork/care_fe PR: 0 File: .github/instructions/react-components.instructions.md:0-0 Timestamp: 2025-11-25T13:52:51.914Z Learning: Applies to src/components/**/*.{ts,tsx} : Maintain proper heading hierarchy for screen reader support in medical records displayLearnt from: CR Repo: ohcnetwork/care_fe PR: 0 File: .github/instructions/pages.instructions.md:0-0 Timestamp: 2025-11-25T13:52:19.758Z Learning: Applies to src/pages/**/*.{ts,tsx} : Use proper ARIA labels and roles in page componentsLearnt from: AdityaJ2305 Repo: ohcnetwork/care_fe PR: 12916 File: src/pages/Facility/settings/billing/discount/discount-codes/DiscountCodeForm.tsx:78-78 Timestamp: 2025-07-14T20:52:10.752Z Learning: In the care_fe codebase, the pattern for aria-required attributes on FormLabel components is to use `aria-required` without an explicit value (e.g., `<FormLabel aria-required>`) rather than `aria-required="true"`. This is the consistent pattern used throughout the codebase.Learnt from: CR Repo: ohcnetwork/care_fe PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-25T13:50:10.786Z Learning: Applies to src/components/**/*.{ts,tsx} : Include medical use cases, accessibility notes, and WCAG compliance documentation in component documentationLearnt from: CR Repo: ohcnetwork/care_fe PR: 0 File: .github/instructions/careui.instructions.md:0-0 Timestamp: 2025-11-25T13:50:46.407Z Learning: Applies to src/CAREUI/**/*.{ts,tsx} : Provide clear and visible focus indicators for complex medical workflows in CAREUI components
| limit, | ||
| exclude_verification_status: "entered_in_error", | ||
| category: "encounter_diagnosis,chronic_condition", | ||
| <div className="flex justify-between items-center flex-wrap"> |
There was a problem hiding this comment.
Add gap spacing to the flex container.
The flex container is missing a gap class, which could result in insufficient spacing between the QuestionLabel and HistoricalRecordSelector when they wrap to separate lines on smaller screens. Consider adding gap-2 or gap-4 for consistent spacing.
✨ Suggested improvement
- <div className="flex justify-between items-center flex-wrap">
+ <div className="flex justify-between items-center flex-wrap gap-2">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="flex justify-between items-center flex-wrap"> | |
| <div className="flex justify-between items-center flex-wrap gap-2"> |
🤖 Prompt for AI Agents
In @src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx at line
549, The flex container div currently rendered as <div className="flex
justify-between items-center flex-wrap"> should include a gap utility to ensure
spacing when its children (QuestionLabel and HistoricalRecordSelector) wrap;
update the className to include either "gap-2" or "gap-4" (e.g., className="flex
justify-between items-center flex-wrap gap-2") so wrapped elements maintain
consistent spacing.
Proposed Changes
Lot of changes are because of prettier formatting in three files, otherwise it is less than ~30 lines of change 😅
Fixes #15087
Tagging: @ohcnetwork/care-fe-code-reviewers
Merge Checklist
✏️ Tip: You can customize this high-level summary in your review settings.