From 4d84be8d3d4671ea3f62e14fe45083adfc8d326e Mon Sep 17 00:00:00 2001
From: Arkadiusz Bachorski
 <60391032+arkadiuszbachorski@users.noreply.github.com>
Date: Sat, 24 Aug 2024 14:27:16 +0200
Subject: [PATCH] Add dosage instructions (#36)

# Add dosage instructions

## :recycle: Current situation & Problem
This PR adds dosage instructions to medications

### Code of Conduct & Contributing Guidelines

By submitting creating this pull request, you agree to follow our [Code
of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md):
- [x] I agree to follow the [Code of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md).
---
 app/(dashboard)/patients/Medications.tsx      | 50 ++++++++++++++++++-
 app/(dashboard)/patients/[id]/AllergyForm.tsx | 24 ++++-----
 app/(dashboard)/patients/[id]/page.tsx        | 11 ++--
 modules/firebase/models/medication.ts         |  2 +
 modules/firebase/utils.ts                     |  4 +-
 5 files changed, 69 insertions(+), 22 deletions(-)

diff --git a/app/(dashboard)/patients/Medications.tsx b/app/(dashboard)/patients/Medications.tsx
index 4490f2d9..df3d4511 100644
--- a/app/(dashboard)/patients/Medications.tsx
+++ b/app/(dashboard)/patients/Medications.tsx
@@ -6,13 +6,22 @@
 // SPDX-License-Identifier: MIT
 //
 'use client'
-import { Plus, Check, Trash } from 'lucide-react'
+import { Plus, Check, Trash, Pencil } from 'lucide-react'
 import { z } from 'zod'
 import { useMedicationsMap } from '@/app/(dashboard)/patients/clientUtils'
 import { MedicationSelect } from '@/app/(dashboard)/patients/MedicationSelect'
 import { type MedicationsData } from '@/app/(dashboard)/patients/utils'
 import { Button } from '@/packages/design-system/src/components/Button'
 import { Card } from '@/packages/design-system/src/components/Card'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogClose,
+} from '@/packages/design-system/src/components/Dialog'
 import { EmptyState } from '@/packages/design-system/src/components/EmptyState'
 import {
   Select,
@@ -28,6 +37,7 @@ import {
   TableRow,
   TableBody,
 } from '@/packages/design-system/src/components/Table'
+import { Textarea } from '@/packages/design-system/src/components/Textarea'
 import { Tooltip } from '@/packages/design-system/src/components/Tooltip'
 import { Field } from '@/packages/design-system/src/forms/Field'
 import { useForm } from '@/packages/design-system/src/forms/useForm'
@@ -49,6 +59,7 @@ const formSchema = z.object({
   medications: z.array(
     z.object({
       id: z.string(),
+      instructions: z.string(),
       medication: z.string({ required_error: 'Medication is required' }),
       drug: z.string({ required_error: 'Drug is required' }),
       quantity: z.number().min(0),
@@ -86,6 +97,7 @@ export const Medications = ({
         // `undefined` doesn't get submitted anywhere
         medication: undefined as unknown as string,
         drug: undefined as unknown as string,
+        instructions: '',
         quantity: 1,
         frequencyPerDay: 1,
       },
@@ -117,7 +129,8 @@ export const Medications = ({
               <TableCell className="w-[130px]">Quantity</TableCell>
               <TableCell className="w-[190px]">Frequency</TableCell>
               <TableCell className="w-[190px]">Daily dosage</TableCell>
-              <TableCell className="w-[75px]" />
+              <TableCell className="w-[120px]">Instructions</TableCell>
+              <TableCell className="w-[75px]"></TableCell>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -305,6 +318,39 @@ export const Medications = ({
                       </div>
                     }
                   </TableCell>
+                  <TableCell>
+                    <Dialog>
+                      <DialogTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="relative -left-3"
+                        >
+                          {medicationValue.instructions && (
+                            <span className="max-w-[70px] truncate">
+                              {medicationValue.instructions}
+                            </span>
+                          )}
+                          <Pencil className="size-4 opacity-80" />
+                        </Button>
+                      </DialogTrigger>
+                      <DialogContent>
+                        <DialogHeader>
+                          <DialogTitle>Modify instructions</DialogTitle>
+                        </DialogHeader>
+                        <Field
+                          control={form.control}
+                          name={nestedKey('instructions')}
+                          render={({ field }) => <Textarea {...field} />}
+                        />
+                        <DialogFooter>
+                          <DialogClose>
+                            <Button>Close</Button>
+                          </DialogClose>
+                        </DialogFooter>
+                      </DialogContent>
+                    </Dialog>
+                  </TableCell>
                   <TableCell>
                     <Tooltip tooltip="Delete">
                       <Button
diff --git a/app/(dashboard)/patients/[id]/AllergyForm.tsx b/app/(dashboard)/patients/[id]/AllergyForm.tsx
index c93f0a1c..75e7ba66 100644
--- a/app/(dashboard)/patients/[id]/AllergyForm.tsx
+++ b/app/(dashboard)/patients/[id]/AllergyForm.tsx
@@ -66,18 +66,6 @@ export const AllergyForm = ({
 
   return (
     <form onSubmit={handleSubmit}>
-      <Field
-        control={form.control}
-        name="medication"
-        label="Medication"
-        render={({ field }) => (
-          <MedicationSelect
-            medications={medications}
-            onValueChange={field.onChange}
-            {...field}
-          />
-        )}
-      />
       <Field
         control={form.control}
         name="type"
@@ -97,6 +85,18 @@ export const AllergyForm = ({
           </Select>
         )}
       />
+      <Field
+        control={form.control}
+        name="medication"
+        label="Medication"
+        render={({ field }) => (
+          <MedicationSelect
+            medications={medications}
+            onValueChange={field.onChange}
+            {...field}
+          />
+        )}
+      />
       <Button type="submit" isPending={form.formState.isSubmitting}>
         {isEdit ? 'Edit' : 'Create'} allergy
       </Button>
diff --git a/app/(dashboard)/patients/[id]/page.tsx b/app/(dashboard)/patients/[id]/page.tsx
index 1b1835ed..db3a3dff 100644
--- a/app/(dashboard)/patients/[id]/page.tsx
+++ b/app/(dashboard)/patients/[id]/page.tsx
@@ -56,15 +56,14 @@ const getUserMedications = async (payload: {
   const medicationRequests = await getDocsData(refs.medicationRequests(payload))
   return medicationRequests.map((request) => {
     const ids = getMedicationRequestMedicationIds(request)
+    const dosage = request.dosageInstruction?.at(0)
     return {
       id: request.id,
       medication: ids.medicationId ?? '',
       drug: ids.drugId ?? '',
-      frequencyPerDay:
-        request.dosageInstruction?.at(0)?.timing?.repeat?.frequency ?? 1,
-      quantity:
-        request.dosageInstruction?.at(0)?.doseAndRate?.at(0)?.doseQuantity
-          ?.value ?? 1,
+      frequencyPerDay: dosage?.timing?.repeat?.frequency ?? 1,
+      quantity: dosage?.doseAndRate?.at(0)?.doseQuantity?.value ?? 1,
+      instructions: dosage?.text ?? '',
     }
   })
 }
@@ -178,7 +177,7 @@ const PatientPage = async ({ params }: PatientPageProps) => {
         />
       }
     >
-      <Tabs defaultValue={Tab.information}>
+      <Tabs defaultValue={Tab.medications}>
         <TabsList className="mb-6 w-full">
           <TabsTrigger value={Tab.information} className="grow">
             Information
diff --git a/modules/firebase/models/medication.ts b/modules/firebase/models/medication.ts
index a3baafda..f8f36ad9 100644
--- a/modules/firebase/models/medication.ts
+++ b/modules/firebase/models/medication.ts
@@ -143,12 +143,14 @@ export const getMedicationRequestData = (medication: {
   drug: string
   frequencyPerDay: number
   quantity: number
+  instructions: string
 }): FHIRMedicationRequest => ({
   medicationReference: {
     reference: `medications/${medication.medication}/drugs/${medication.drug}`,
   },
   dosageInstruction: [
     {
+      text: medication.instructions,
       timing: {
         repeat: {
           frequency: medication.frequencyPerDay,
diff --git a/modules/firebase/utils.ts b/modules/firebase/utils.ts
index 31c1fb2e..ce7ea10a 100644
--- a/modules/firebase/utils.ts
+++ b/modules/firebase/utils.ts
@@ -344,8 +344,8 @@ export const getDocData = async <T>(reference: DocumentReference<T>) => {
   const data = doc.data()
   return data ?
       {
-        id: doc.id,
         ...data,
+        id: doc.id,
       }
     : undefined
 }
@@ -365,8 +365,8 @@ export const getDocsData = async <T>(query: Query<T>) => {
     const data = doc.data()
     if (!data) throw new Error(`No data for ${doc.id} ${doc.ref.path}`)
     return {
-      id: doc.id,
       ...data,
+      id: doc.id,
     }
   })
 }