Skip to content

Commit

Permalink
Frequency & Days -> Duration changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@amjithtitus09
amjithtitus09 committed Jan 9, 2025
1 parent 5d6752f commit 0c4cfbe
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 46 deletions.
4 changes: 3 additions & 1 deletion src/components/Common/QuantityInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ interface Props<TUnit extends string> {
disabled?: boolean;
placeholder?: string;
autoFocus?: boolean;
unitLabels?: Record<TUnit, string>;
}

const QuantityInput = <TUnit extends string>({
Expand All @@ -28,6 +29,7 @@ const QuantityInput = <TUnit extends string>({
disabled,
placeholder,
autoFocus,
unitLabels,
}: Props<TUnit>) => {
const handleChange = (update: Partial<QuantityValue<TUnit>>) => {
onChange({ ...quantity, ...update });
Expand Down Expand Up @@ -60,7 +62,7 @@ const QuantityInput = <TUnit extends string>({
<SelectContent>
{units.map((unit) => (
<SelectItem key={unit} value={unit}>
{unit}
{unitLabels?.[unit] ?? unit}
</SelectItem>
))}
</SelectContent>
Expand Down
131 changes: 89 additions & 42 deletions src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { t } from "i18next";
import React from "react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
Expand All @@ -17,6 +16,7 @@ import { QuantityInput } from "@/components/Common/QuantityInput";
import ValueSetSelect from "@/components/Questionnaire/ValueSetSelect";

import {
BOUNDS_DURATION_UNITS,
DOSAGE_UNITS,
MEDICATION_REQUEST_INTENT,
MedicationRequest,
Expand Down Expand Up @@ -103,9 +103,9 @@ export function MedicationRequestQuestion({
<div className="md:overflow-x-auto w-auto">
{medications.length > 0 && (
<div className="min-w-fit">
<div className="max-w-[2084px] relative border rounded-md">
<div className="max-w-[2144px] relative border rounded-md">
{/* Header */}
<div className="hidden lg:grid grid-cols-[280px,180px,170px,100px,300px,230px,180px,250px,180px,160px,48px] bg-gray-50 border-b text-sm font-medium text-gray-500">
<div className="hidden lg:grid grid-cols-[280px,180px,170px,160px,300px,230px,180px,250px,180px,160px,48px] bg-gray-50 border-b text-sm font-medium text-gray-500">
<div className="font-semibold text-gray-600 p-3 border-r">
{t("medicine")}
</div>
Expand All @@ -116,7 +116,7 @@ export function MedicationRequestQuestion({
{t("frequency")}
</div>
<div className="font-semibold text-gray-600 p-3 border-r">
{t("days")}
{t("duration")}
</div>
<div className="font-semibold text-gray-600 p-3 border-r">
{t("instructions")}
Expand Down Expand Up @@ -186,7 +186,7 @@ const MedicationRequestGridRow: React.FC<{
};

return (
<div className="grid grid-cols-1 lg:grid-cols-[280px,180px,170px,100px,300px,230px,180px,250px,180px,160px,48px] border-b hover:bg-gray-50/50">
<div className="grid grid-cols-1 lg:grid-cols-[280px,180px,170px,160px,300px,230px,180px,250px,180px,160px,48px] border-b hover:bg-gray-50/50">
{/* Medicine Name and Controls */}
<div className="p-4 lg:px-2 lg:py-1 flex items-center justify-between lg:justify-start lg:col-span-1 lg:border-r font-medium overflow-hidden text-sm">
<span className="break-words line-clamp-2">
Expand Down Expand Up @@ -269,19 +269,26 @@ const MedicationRequestGridRow: React.FC<{
</Select>
</div>

{/* Days */}
{/* Duration */}
<div className="lg:px-2 lg:py-1 lg:border-r overflow-hidden">
<Label className="mb-1.5 block text-sm lg:hidden">{t("days")}</Label>
<Input
type="number"
disabled={
disabled || medication.dosage_instruction[0]?.as_needed_boolean
}
value={
medication.dosage_instruction[0]?.timing?.repeat?.bounds_duration
?.value ?? ""
<Label className="mb-1.5 block text-sm lg:hidden">
{t("duration")}
</Label>
<QuantityInput
units={
Object.keys(BOUNDS_DURATION_UNITS) as Array<
keyof typeof BOUNDS_DURATION_UNITS
>
}
onChange={(e) =>
quantity={{
value:
medication.dosage_instruction[0]?.timing?.repeat
?.bounds_duration?.value,
unit:
medication.dosage_instruction[0]?.timing?.repeat
?.bounds_duration?.unit ?? "d",
}}
onChange={(value) =>
handleUpdateDosageInstruction({
timing: {
...dosageInstruction?.timing,
Expand All @@ -292,15 +299,23 @@ const MedicationRequestGridRow: React.FC<{
period_unit:
dosageInstruction?.timing?.repeat?.period_unit ?? "d",
bounds_duration: {
value: e.target.value
? parseInt(e.target.value)
: undefined,
unit: "d",
value: value?.value,
unit: value?.unit as keyof typeof BOUNDS_DURATION_UNITS,
},
},
},
})
}
disabled={
disabled || medication.dosage_instruction[0]?.as_needed_boolean
}
unitLabels={
Object.fromEntries(
Object.entries(BOUNDS_DURATION_UNITS).map(
([key, { label }]) => [key, label],
),
) as Record<keyof typeof BOUNDS_DURATION_UNITS, string>
}
/>
</div>

Expand Down Expand Up @@ -441,41 +456,73 @@ const reverseFrequencyOption = (

// TODO: verify period_unit is correct
const FREQUENCY_OPTIONS = {
BD: {
display: "Twice daily",
BID: {
display: "Two times a day",
timing: { repeat: { frequency: 2, period: 1, period_unit: "d" } },
},
HS: {
display: "Night only",
TID: {
display: "Three times a day",
timing: { repeat: { frequency: 3, period: 1, period_unit: "d" } },
},
QID: {
display: "Four times a day",
timing: { repeat: { frequency: 4, period: 1, period_unit: "d" } },
},
AM: {
display: "Every morning",
timing: { repeat: { frequency: 1, period: 1, period_unit: "d" } },
},
PM: {
display: "Every afternoon",
timing: { repeat: { frequency: 1, period: 1, period_unit: "d" } },
},
OD: {
display: "Once daily",
QD: {
display: "Every day",
timing: { repeat: { frequency: 1, period: 1, period_unit: "d" } },
},
QOD: {
display: "Every other day",
timing: { repeat: { frequency: 1, period: 2, period_unit: "d" } },
},
Q1H: {
display: "Every hour",
timing: { repeat: { frequency: 24, period: 1, period_unit: "d" } },
},
Q2H: {
display: "Every 2 hours",
timing: { repeat: { frequency: 12, period: 1, period_unit: "d" } },
},
Q3H: {
display: "Every 3 hours",
timing: { repeat: { frequency: 8, period: 1, period_unit: "d" } },
},
Q4H: {
display: "4th hourly",
timing: { repeat: { frequency: 4, period: 1, period_unit: "h" } },
display: "Every 4 hours",
timing: { repeat: { frequency: 6, period: 1, period_unit: "d" } },
},
QID: {
display: "6th hourly",
timing: { repeat: { frequency: 6, period: 1, period_unit: "h" } },
Q6H: {
display: "Every 6 hours",
timing: { repeat: { frequency: 4, period: 1, period_unit: "d" } },
},
QOD: {
display: "Alternate day",
timing: { repeat: { frequency: 2, period: 1, period_unit: "d" } },
Q8H: {
display: "Every 8 hours",
timing: { repeat: { frequency: 3, period: 1, period_unit: "d" } },
},
BED: {
display: "At bedtime",
timing: { repeat: { frequency: 1, period: 1, period_unit: "d" } },
},
QWK: {
display: "Once a week",
WK: {
display: "Weekly",
timing: { repeat: { frequency: 1, period: 1, period_unit: "wk" } },
},
STAT: {
display: "Imediately",
timing: { repeat: { frequency: 1, period: 1, period_unit: "s" } },
MO: {
display: "Monthly",
timing: { repeat: { frequency: 1, period: 1, period_unit: "mo" } },
},
TID: {
display: "8th hourly",
timing: { repeat: { frequency: 8, period: 1, period_unit: "h" } },
STAT: {
display: "Immediately",
timing: { repeat: { frequency: 1, period: 1, period_unit: "s" } }, // One-time
},
} as const satisfies Record<
string,
Expand Down
7 changes: 4 additions & 3 deletions src/types/emr/medicationRequest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,10 @@ export const DOSAGE_UNITS = [
] as const;

export const BOUNDS_DURATION_UNITS = {
ms: { label: "Milliseconds" },
s: { label: "Seconds" },
min: { label: "Minutes" },
// TODO: Are these smaller units required?
// ms: { label: "Milliseconds" },
// s: { label: "Seconds" },
// min: { label: "Minutes" },
h: { label: "Hours" },
d: { label: "Days" },
wk: { label: "Weeks" },
Expand Down

0 comments on commit 0c4cfbe

Please sign in to comment.