From 0835c6380f681a13b01c51d5cd142bb1183b8521 Mon Sep 17 00:00:00 2001 From: Amjith Titus Date: Wed, 15 Jan 2025 20:35:28 +0530 Subject: [PATCH 1/7] Dual Valueset for Medication Request Instructions --- public/locale/en.json | 1 + .../Questionnaire/DualValueSetSelect.tsx | 183 ++++++++++++++++++ .../MedicationRequestQuestion.tsx | 76 +++++--- 3 files changed, 228 insertions(+), 32 deletions(-) create mode 100644 src/components/Questionnaire/DualValueSetSelect.tsx diff --git a/public/locale/en.json b/public/locale/en.json index 6b1d2e0558d..b148e29eaf7 100644 --- a/public/locale/en.json +++ b/public/locale/en.json @@ -1638,6 +1638,7 @@ "priority": "Priority", "prn_prescription": "PRN Prescription", "prn_prescriptions": "PRN Prescriptions", + "prn_reason": "PRN Reason", "procedure_suggestions": "Procedure Suggestions", "procedures_select_placeholder": "Select procedures to add details", "professional_info": "Professional Information", diff --git a/src/components/Questionnaire/DualValueSetSelect.tsx b/src/components/Questionnaire/DualValueSetSelect.tsx new file mode 100644 index 00000000000..4e64a6c67cd --- /dev/null +++ b/src/components/Questionnaire/DualValueSetSelect.tsx @@ -0,0 +1,183 @@ +import { useQuery } from "@tanstack/react-query"; +import { X } from "lucide-react"; +import { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; + +import { cn } from "@/lib/utils"; + +import { Button } from "@/components/ui/button"; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, +} from "@/components/ui/command"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; + +import routes from "@/Utils/request/api"; +import query from "@/Utils/request/query"; +import { Code, ValueSetSystem } from "@/types/questionnaire/code"; + +type TabIndex = 0 | 1; + +interface DualValueSetSelectProps { + systems: [ValueSetSystem, ValueSetSystem]; + values?: [Code | null, Code | null]; + onSelect: (index: TabIndex, value: Code | null) => void; + placeholders?: [string, string]; + disabled?: boolean; + count?: number; + searchPostFix?: string; + labels: [string, string]; +} + +export function DualValueSetSelect({ + systems, + values = [null, null], + onSelect, + placeholders = ["Search...", "Search..."], + disabled, + count = 10, + searchPostFix = "", + labels, +}: DualValueSetSelectProps) { + const { t } = useTranslation(); + const [open, setOpen] = useState(false); + const [activeTab, setActiveTab] = useState(0); + const [search, setSearch] = useState(""); + + const searchQuery = useQuery({ + queryKey: ["valueset", systems[activeTab], "expand", count, search], + queryFn: query.debounced(routes.valueset.expand, { + pathParams: { system: systems[activeTab] }, + body: { count, search: search + searchPostFix }, + }), + }); + + useEffect(() => { + if (open) { + setSearch(""); + } + }, [open, activeTab]); + + const handleRemove = (index: TabIndex, e: React.MouseEvent) => { + e.stopPropagation(); + onSelect(index, null); + }; + + const handleSelect = (value: Code) => { + onSelect(activeTab, { + code: value.code, + display: value.display || "", + system: value.system || "", + }); + + if (activeTab === 0) { + setActiveTab(1); + } else { + setOpen(false); + } + }; + + const hasValues = values.some((v) => v !== null); + + return ( + + + + + ), + )} + + )} + + + + setActiveTab(Number(value) as TabIndex)} + > + + + {labels[0]} + + + {labels[1]} + + + 1}> + + + + {search.length < 3 + ? t("min_char_length_error", { min_length: 3 }) + : searchQuery.isFetching + ? t("searching") + : t("no_results_found")} + + + {searchQuery.data?.results.map((option) => ( + handleSelect(option)} + className={cn( + values[activeTab]?.code === option.code && + "bg-primary/10 text-primary font-medium", + )} + > + {option.display} + + ))} + + + + + + + ); +} diff --git a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx index 73361b3e774..c62204eb10a 100644 --- a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx +++ b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx @@ -37,6 +37,7 @@ import { } from "@/components/ui/select"; import { ComboboxQuantityInput } from "@/components/Common/ComboboxQuantityInput"; +import { DualValueSetSelect } from "@/components/Questionnaire/DualValueSetSelect"; import ValueSetSelect from "@/components/Questionnaire/ValueSetSelect"; import useBreakpoints from "@/hooks/useBreakpoints"; @@ -169,7 +170,7 @@ export function MedicationRequestQuestion({ })} > {/* Header - Only show on desktop */} -
+
{t("medicine")}
@@ -185,9 +186,6 @@ export function MedicationRequestQuestion({
{t("instructions")}
-
- {t("additional_instructions")} -
{t("route")}
@@ -449,7 +447,7 @@ const MedicationRequestGridRow: React.FC = ({ }; return ( -
+
{/* Medicine Name */}
@@ -651,33 +649,47 @@ const MedicationRequestGridRow: React.FC = ({ - - handleUpdateDosageInstruction({ as_needed_for: reason }) - } - placeholder={t("select_prn_reason")} - disabled={disabled || !dosageInstruction?.as_needed_boolean} - wrapTextForSmallScreen={true} - /> -
- {/* Additional Instructions */} -
- - - handleUpdateDosageInstruction({ - additional_instruction: [instruction], - }) - } - placeholder={t("select_additional_instructions")} - disabled={disabled} - /> + {dosageInstruction?.as_needed_boolean ? ( + { + if (index === 0) { + handleUpdateDosageInstruction({ + as_needed_for: value || undefined, + }); + } else { + handleUpdateDosageInstruction({ + additional_instruction: value ? [value] : undefined, + }); + } + }} + labels={[t("prn_reason"), t("additional_instructions")]} + placeholders={[ + t("select_prn_reason"), + t("select_additional_instructions"), + ]} + disabled={disabled} + /> + ) : ( + + handleUpdateDosageInstruction({ + additional_instruction: instruction ? [instruction] : undefined, + }) + } + placeholder={t("select_additional_instructions")} + disabled={disabled} + /> + )}
{/* Route */}
From bdd6ae3931cc81d36fc4223c13ddcf84b0c90800 Mon Sep 17 00:00:00 2001 From: Amjith Titus Date: Thu, 16 Jan 2025 13:10:17 +0530 Subject: [PATCH 2/7] Medication Request Notes field --- public/locale/en.json | 1 + .../MedicationRequestQuestion.tsx | 43 +++++++++++++++++-- src/pages/Encounters/PrintPrescription.tsx | 3 +- 3 files changed, 43 insertions(+), 4 deletions(-) diff --git a/public/locale/en.json b/public/locale/en.json index 74a60d0ffbb..56705583542 100644 --- a/public/locale/en.json +++ b/public/locale/en.json @@ -1422,6 +1422,7 @@ "noshow": "No-show", "not_eligible": "Not Eligible", "not_specified": "Not Specified", + "note": "Note", "notes": "Notes", "notes_placeholder": "Type your Notes", "notice_board": "Notice Board", diff --git a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx index c62204eb10a..00a651640b1 100644 --- a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx +++ b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx @@ -38,6 +38,7 @@ import { import { ComboboxQuantityInput } from "@/components/Common/ComboboxQuantityInput"; import { DualValueSetSelect } from "@/components/Questionnaire/DualValueSetSelect"; +import { NotesInput } from "@/components/Questionnaire/QuestionTypes/NotesInput"; import ValueSetSelect from "@/components/Questionnaire/ValueSetSelect"; import useBreakpoints from "@/hooks/useBreakpoints"; @@ -170,7 +171,7 @@ export function MedicationRequestQuestion({ })} > {/* Header - Only show on desktop */} -
+
{t("medicine")}
@@ -198,6 +199,9 @@ export function MedicationRequestQuestion({
{t("intent")}
+
+ {t("notes")} +
@@ -276,7 +280,7 @@ export function MedicationRequestQuestion({
-
+
= ({ }; return ( -
+
{/* Medicine Name */}
@@ -751,6 +755,39 @@ const MedicationRequestGridRow: React.FC = ({
+ {/* Notes */} +
+ + {desktopLayout ? ( + <> + + onUpdate?.({ note: e.target.value })} + placeholder={t("add_notes")} + disabled={disabled} + className="h-9 text-sm" + /> + + ) : ( + { + onUpdate?.({ note: response.note }); + }} + disabled={disabled} + /> + )} +
{/* Remove Button */}
- -
- {activeMedications?.map((med) => ( - - ))} -
- - -
- {discontinuedMedications?.map((med) => ( - - ))} -
- +
+ + + + + + +
+ )} @@ -187,167 +163,4 @@ const MedicineAdministrationSheet = ({ facilityId }: Props) => { ); }; -const PrescriptionEntry = ({ - medication, -}: { - medication: MedicationRequest; -}) => { - const instruction = medication.dosage_instruction[0]; - if (!instruction) return null; - - const frequency = getFrequencyDisplay(instruction.timing); - const additionalInstructions = instruction.additional_instruction; - const isPrn = instruction.as_needed_boolean; - - // Get status variant - const getStatusVariant = ( - status: string = "", - ): "default" | "destructive" | "secondary" | "outline" | "primary" => { - switch (status) { - case "active": - return "default"; - case "on-hold": - return "secondary"; - case "cancelled": - return "destructive"; - case "completed": - return "primary"; - default: - return "secondary"; - } - }; - - // Get priority variant - const getPriorityVariant = ( - priority: string = "", - ): "default" | "destructive" | "secondary" | "outline" | "primary" => { - switch (priority) { - case "stat": - return "destructive"; - case "urgent": - case "asap": - return "primary"; - default: - return "outline"; - } - }; - - return ( -
- {/* Medicine Name and Status */} -
-
-
-
- - {medication.medication?.display} - - {isPrn && ( - - ● - PRN - - )} -
-
- {medication.priority && ( - - {medication.priority} - - )} - - {medication.status} - -
-
-

- {medication.medication?.code} -

-
-
- - {/* Dosage and Instructions */} -
- {instruction.dose_and_rate && ( - - {/* TODO: Rebuild Medicine Administration Sheet */} - {/* {instruction.dose_and_rate.type === "calculated" ? ( - - {instruction.dose_and_rate.dose_range?.low.value}{" "} - {instruction.dose_and_rate.dose_range?.low.unit} →{" "} - {instruction.dose_and_rate.dose_range?.high.value}{" "} - {instruction.dose_and_rate.dose_range?.high.unit} - - ) : ( - - {instruction.dose_and_rate.dose_quantity?.value}{" "} - {instruction.dose_and_rate.dose_quantity?.unit} - - )} */} - - )} - {instruction.route && ( - - Via:{" "} - {instruction.route.display} - - )} - {instruction.method && ( - - Method:{" "} - {instruction.method.display} - - )} - {instruction.site && ( - - Site:{" "} - {instruction.site.display} - - )} - {frequency && {frequency.code}} - {isPrn && instruction.as_needed_for && ( - - When:{" "} - {instruction.as_needed_for.display} - - )} -
- {instruction.timing?.repeat?.bounds_duration && ( -
- {t("duration")}:{" "} - {instruction.timing.repeat.bounds_duration.value}{" "} - {instruction.timing.repeat.bounds_duration.unit && - t(`${instruction.timing.repeat.bounds_duration.unit}`)} -
- )} - - {/* Additional Instructions */} - {additionalInstructions && additionalInstructions.length > 0 && ( -
- {additionalInstructions.map((instr, idx) => ( - - {idx > 0 && " • "} - {instr.display} - - ))} -
- )} -
- ); -}; - export default MedicineAdministrationSheet; diff --git a/src/pages/Encounters/PrintPrescription.tsx b/src/pages/Encounters/PrintPrescription.tsx index da6cee39e4d..7ea1057101b 100644 --- a/src/pages/Encounters/PrintPrescription.tsx +++ b/src/pages/Encounters/PrintPrescription.tsx @@ -5,76 +5,13 @@ import { useTranslation } from "react-i18next"; import PrintPreview from "@/CAREUI/misc/PrintPreview"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; - -import { reverseFrequencyOption } from "@/components/Questionnaire/QuestionTypes/MedicationRequestQuestion"; +import { MedicationsTable } from "@/components/Medicine/MedicationsTable"; import api from "@/Utils/request/api"; import query from "@/Utils/request/query"; import { formatPatientAge } from "@/Utils/utils"; import { Encounter } from "@/types/emr/encounter"; -import { - MEDICATION_REQUEST_TIMING_OPTIONS, - MedicationRequestDosageInstruction, - MedicationRequestRead, -} from "@/types/emr/medicationRequest"; - -function getFrequencyDisplay( - timing?: MedicationRequestDosageInstruction["timing"], -) { - if (!timing) return undefined; - const code = reverseFrequencyOption(timing); - if (!code) return undefined; - return { - code, - meaning: MEDICATION_REQUEST_TIMING_OPTIONS[code].display, - }; -} - -// Helper function to format dosage in Rx style -function formatDosage(instruction: MedicationRequestDosageInstruction) { - if (!instruction.dose_and_rate) return ""; - - if (instruction.dose_and_rate.type === "calculated") { - const { dose_range } = instruction.dose_and_rate; - if (!dose_range) return ""; - return `${dose_range.low.value}${dose_range.low.unit.display} - ${dose_range.high.value}${dose_range.high.unit.display}`; - } - - const { dose_quantity } = instruction.dose_and_rate; - if (!dose_quantity?.value || !dose_quantity.unit) return ""; - - return `${dose_quantity.value} ${dose_quantity.unit.display}`; -} - -// Helper function to format dosage instructions in Rx style -function formatSig(instruction: MedicationRequestDosageInstruction) { - const parts: string[] = []; - - // Add route if present - if (instruction.route?.display) { - parts.push(`Via ${instruction.route.display}`); - } - - // Add method if present - if (instruction.method?.display) { - parts.push(`by ${instruction.method.display}`); - } - - // Add site if present - if (instruction.site?.display) { - parts.push(`to ${instruction.site.display}`); - } - - return parts.join(" "); -} +import { MedicationRequestRead } from "@/types/emr/medicationRequest"; export const PrintPrescription = (props: { facilityId: string; @@ -187,57 +124,7 @@ export const PrintPrescription = (props: {
℞
{/* Medications Table */} -
- - - - {t("medicine")} - {t("dosage")} - {t("frequency")} - {t("duration")} - {t("instructions")} - - - - {medications.results.map((medication) => { - const instruction = medication.dosage_instruction[0]; - const frequency = getFrequencyDisplay(instruction?.timing); - const dosage = formatDosage(instruction); - const duration = instruction?.timing?.repeat?.bounds_duration; - const remarks = formatSig(instruction); - const notes = medication.note; - return ( - - - {medication.medication?.display} - - {dosage} - - {instruction?.as_needed_boolean - ? `${t("as_needed_prn")} (${instruction?.as_needed_for?.display})` - : frequency?.meaning} - {instruction?.additional_instruction?.[0]?.display && ( -
- {instruction.additional_instruction[0].display} -
- )} - - - {duration ? `${duration.value} ${duration.unit}` : "-"} - - - {remarks || "-"} - {notes ? ` (${t("note")}: ${notes})` : ""} - - - ); - })} - -
-
+ {/* Doctor's Signature */}
From 3c55b15733e4a07bcb42a84dfe5a4c8ae6203fa9 Mon Sep 17 00:00:00 2001 From: Amjith Titus Date: Thu, 16 Jan 2025 17:16:26 +0530 Subject: [PATCH 4/7] Medication Statement form changes --- public/locale/en.json | 2 + .../Questionnaire/QuestionRenderer.tsx | 1 + .../MedicationStatementQuestion.tsx | 632 +++++++++++------- .../Questionnaire/structured/types.ts | 6 +- src/types/emr/medicationStatement.ts | 10 + src/types/questionnaire/form.ts | 4 +- 6 files changed, 423 insertions(+), 232 deletions(-) diff --git a/public/locale/en.json b/public/locale/en.json index 519f04a217a..451c2c2f9fb 100644 --- a/public/locale/en.json +++ b/public/locale/en.json @@ -950,6 +950,7 @@ "enter_aadhaar_otp": "Enter OTP sent to the registered mobile with Aadhaar", "enter_abha_address": "Enter ABHA Address", "enter_any_id": "Enter any ID linked with your ABHA number", + "enter_dosage_instructions": "Enter Dosage Instructions", "enter_file_name": "Enter File Name", "enter_message": "Start typing...", "enter_mobile_number": "Enter Mobile Number", @@ -1289,6 +1290,7 @@ "medical_council_registration_required": "Medical Council Registration is required", "medical_records": "Medical Records", "medical_worker": "Medical Worker", + "medication": "Medication", "medication_taken_between": "Medication Taken Between", "medicine": "Medicine", "medicine_administration_history": "Medicine Administration History", diff --git a/src/components/Questionnaire/QuestionRenderer.tsx b/src/components/Questionnaire/QuestionRenderer.tsx index 0b01894b9cf..b4f5168c60e 100644 --- a/src/components/Questionnaire/QuestionRenderer.tsx +++ b/src/components/Questionnaire/QuestionRenderer.tsx @@ -14,6 +14,7 @@ import { QuestionGroup } from "./QuestionTypes/QuestionGroup"; // Questions that should be rendered full width const FULL_WIDTH_QUESTION_TYPES: StructuredQuestionType[] = [ "medication_request", + "medication_statement", ]; interface QuestionRendererProps { diff --git a/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx index 3482310b778..ab41c264a97 100644 --- a/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx +++ b/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx @@ -1,14 +1,27 @@ -import { - MinusCircledIcon, - QuestionMarkCircledIcon, - TextAlignLeftIcon, -} from "@radix-ui/react-icons"; -import React from "react"; +import { MinusCircledIcon } from "@radix-ui/react-icons"; +import React, { useState } from "react"; import { useTranslation } from "react-i18next"; +import { cn } from "@/lib/utils"; + import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon"; +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, +} from "@/components/ui/alert-dialog"; import { Button } from "@/components/ui/button"; +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/components/ui/collapsible"; import { DateRangePicker } from "@/components/ui/date-range-picker"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; @@ -19,14 +32,16 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select"; -import { Textarea } from "@/components/ui/textarea"; +import { NotesInput } from "@/components/Questionnaire/QuestionTypes/NotesInput"; import ValueSetSelect from "@/components/Questionnaire/ValueSetSelect"; +import useBreakpoints from "@/hooks/useBreakpoints"; + import { MEDICATION_STATEMENT_STATUS, - MedicationStatement, MedicationStatementInformationSourceType, + MedicationStatementRequest, MedicationStatementStatus, } from "@/types/emr/medicationStatement"; import { Code } from "@/types/questionnaire/code"; @@ -40,12 +55,14 @@ interface MedicationStatementQuestionProps { disabled?: boolean; } -const MEDICATION_STATEMENT_INITIAL_VALUE: Omit< - MedicationStatement, - "medication" | "patient" | "encounter" | "id" -> = { +const MEDICATION_STATEMENT_INITIAL_VALUE: MedicationStatementRequest = { status: "active", reason: undefined, + medication: { + code: "", + display: "", + system: "", + }, dosage_text: "", effective_period: undefined, information_source: MedicationStatementInformationSourceType.PATIENT, @@ -58,15 +75,20 @@ export function MedicationStatementQuestion({ disabled, }: MedicationStatementQuestionProps) { const { t } = useTranslation(); + const desktopLayout = useBreakpoints({ lg: true, default: false }); + const [expandedMedicationIndex, setExpandedMedicationIndex] = useState< + number | null + >(null); + const [medicationToDelete, setMedicationToDelete] = useState( + null, + ); const medications = - (questionnaireResponse.values?.[0]?.value as MedicationStatement[]) || []; + (questionnaireResponse.values?.[0] + ?.value as MedicationStatementRequest[]) || []; const handleAddMedication = (medication: Code) => { - const newMedications: Omit< - MedicationStatement, - "patient" | "encounter" | "id" - >[] = [ + const newMedications: MedicationStatementRequest[] = [ ...medications, { ...MEDICATION_STATEMENT_INITIAL_VALUE, medication }, ]; @@ -75,23 +97,33 @@ export function MedicationStatementQuestion({ values: [ { type: "medication_statement", - value: newMedications as MedicationStatement[], // FIXME: Remove this cast + value: newMedications, }, ], }); + setExpandedMedicationIndex(newMedications.length - 1); }; const handleRemoveMedication = (index: number) => { - const newMedications = medications.filter((_, i) => i !== index); + setMedicationToDelete(index); + }; + + const confirmRemoveMedication = () => { + if (medicationToDelete === null) return; + + const newMedications = medications.filter( + (_, i) => i !== medicationToDelete, + ); updateQuestionnaireResponseCB({ ...questionnaireResponse, values: [{ type: "medication_statement", value: newMedications }], }); + setMedicationToDelete(null); }; const handleUpdateMedication = ( index: number, - updates: Partial, + updates: Partial, ) => { const newMedications = medications.map((medication, i) => i === index ? { ...medication, ...updates } : medication, @@ -109,230 +141,376 @@ export function MedicationStatementQuestion({ }; return ( - <> +
+ !open && setMedicationToDelete(null)} + > + + + {t("remove_medication")} + + {t("remove_medication_confirmation", { + medication: + medications[medicationToDelete!]?.medication?.display, + })} + + + + {t("cancel")} + + {t("remove")} + + + + + {medications.length > 0 && ( -
-
    - {medications.map((medication, index) => ( -
  • - - handleUpdateMedication(index, medication) - } - onRemove={() => handleRemoveMedication(index)} - index={index} - /> -
    • - ))} -
+
+
+
+ {/* Header - Only show on desktop */} +
+
+ {t("medicine")} +
+
+ {t("source")} +
+
+ {t("status")} +
+
+ {t("dosage_instructions")} +
+
+ {t("medication_taken_between")} +
+
+ {t("reason")} +
+
+ {t("notes")} +
+
+
+ + {/* Body */} +
+ {medications.map((medication, index) => ( + + {!desktopLayout ? ( + { + setExpandedMedicationIndex( + expandedMedicationIndex === index ? null : index, + ); + }} + className="border-b last:border-b-0" + > +
+ +
+ {medication.medication?.display} +
+ +
+ {expandedMedicationIndex !== index && ( + + )} + +
+
+ +
+ + handleUpdateMedication(index, updates) + } + onRemove={() => handleRemoveMedication(index)} + /> +
+ + + ) : ( + + handleUpdateMedication(index, updates) + } + onRemove={() => handleRemoveMedication(index)} + /> + )} + + ))} +
+
+
)} - - +
+ +
+
); } -const MedicationStatementItem: React.FC<{ - medication: MedicationStatement; +interface MedicationStatementGridRowProps { + medication: MedicationStatementRequest; disabled?: boolean; - onUpdate: (medication: Partial) => void; - onRemove: () => void; - index: number; -}> = ({ medication, disabled, onUpdate, onRemove, index }) => { + onUpdate?: (medication: Partial) => void; + onRemove?: () => void; +} + +const MedicationStatementGridRow: React.FC = ({ + medication, + disabled, + onUpdate, + onRemove, +}) => { const { t } = useTranslation(); + const desktopLayout = useBreakpoints({ lg: true, default: false }); return ( -
-
-

- {index + 1}. {medication.medication?.display} -

-
-
- - -
- -
+
+ {/* Medicine Name */} +
+ + {medication.medication?.display} +
-
-
-
- - -
-
- - - onUpdate({ - dosage_text: event.target.value, - }) - } - disabled={disabled} - /> -
-
- - - onUpdate({ - effective_period: { - start: date?.from?.toISOString(), - end: date?.to?.toISOString(), - }, - }) - } - /> -
-
- {medication.reason !== undefined && ( -
- - onUpdate({ reason: e.target.value })} - /> -
- )} + {/* Source */} +
+ + +
- {medication.note !== undefined && ( -
-