Working Demo

ohcnetwork · Jan 3, 2025 · 7cc5e59 · 7cc5e59
1 parent ab34a7f
commit 7cc5e59
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 38 deletions.
diff --git a/src/Routers/routes/ConsultationRoutes.tsx b/src/Routers/routes/ConsultationRoutes.tsx
@@ -39,6 +39,7 @@ const consultationRoutes: AppRoutes = {
         facilityId={facilityId}
         encounterId={encounterId}
         questionnaireSlug="encounter"
+        subjectType="encounter"
         patientId={patientId}
       />
     ),

diff --git a/src/components/Questionnaire/QuestionTypes/DateTimeQuestion.tsx b/src/components/Questionnaire/QuestionTypes/DateTimeQuestion.tsx
@@ -1,6 +1,5 @@
 import { format } from "date-fns";
 import dayjs from "dayjs";
-import { useState } from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -37,11 +36,9 @@ export function DateTimeQuestion({
   clearError,
   classes,
 }: DateTimeQuestionProps) {
-  const [currentValue, setCurrentValue] = useState(() => {
-    return questionnaireResponse.values[0]?.value
-      ? new Date(questionnaireResponse.values[0].value as string)
-      : undefined;
-  });
+  const currentValue = questionnaireResponse.values[0]?.value
+    ? new Date(questionnaireResponse.values[0].value as string)
+    : undefined;
 
   const handleSelect = (date: Date | undefined) => {
     if (!date) {
@@ -102,7 +99,6 @@ export function DateTimeQuestion({
           if (value?.date) {
             const date = dayjs(value.date).toDate();
             console.log(value, date);
-            setCurrentValue(date);
             handleUpdate(date);
           }
         }}

diff --git a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
@@ -1,5 +1,5 @@
 import { MinusCircledIcon } from "@radix-ui/react-icons";
-import React, { useState } from "react";
+import React from "react";
 
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -34,7 +34,6 @@ interface MedicationRequestQuestionProps {
   updateQuestionnaireResponseCB: (response: QuestionnaireResponse) => void;
   disabled?: boolean;
 }
-
 const MEDICATION_REQUEST_INITIAL_VALUE: MedicationRequest = {
   status: "active",
   intent: "order",
@@ -45,19 +44,14 @@ const MEDICATION_REQUEST_INITIAL_VALUE: MedicationRequest = {
   authored_on: new Date().toISOString(),
   dosage_instruction: [],
 };
-
 export function MedicationRequestQuestion({
   question,
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
 }: MedicationRequestQuestionProps) {
-  const [medications, setMedications] = useState<MedicationRequest[]>(() => {
-    return (
-      (questionnaireResponse.values?.[0]?.value as MedicationRequest[]) || []
-    );
-  });
-
+  const medications =
+    (questionnaireResponse.values?.[0]?.value as MedicationRequest[]) || [];
   const handleAddMedication = (medication: Code) => {
     const newMedications: MedicationRequest[] = [
       ...medications,
@@ -77,23 +71,20 @@ export function MedicationRequestQuestion({
       ],
     });
   };
-
   const handleRemoveMedication = (index: number) => {
     const newMedications = medications.filter((_, i) => i !== index);
     updateQuestionnaireResponseCB({
       ...questionnaireResponse,
       values: [{ type: "medication_request", value: newMedications }],
     });
   };
-
   const handleUpdateMedication = (
     index: number,
     updates: Partial<MedicationRequest>,
   ) => {
     const newMedications = medications.map((medication, i) =>
       i === index ? { ...medication, ...updates } : medication,
     );
-
     updateQuestionnaireResponseCB({
       ...questionnaireResponse,
       values: [
@@ -104,18 +95,12 @@ export function MedicationRequestQuestion({
       ],
     });
   };
-
   return (
     <div className="space-y-4">
-      <Label className="text-base font-medium">
-        {question.text}
-        {question.required && <span className="ml-1 text-red-500">*</span>}
-      </Label>
       <ScribeStructuredInput
         value={medications}
         onChange={(value) => {
           if (value) {
-            setMedications(value);
             updateQuestionnaireResponseCB({
               ...questionnaireResponse,
               values: [
@@ -128,7 +113,7 @@ export function MedicationRequestQuestion({
           }
         }}
         name="Medication Request"
-        prompt={`An array of objects of the following type: {
+        prompt={`An array of objects of the following type, based on a SNOWMED Medication Product like "Paracetamol containing product": {
           status?: "active" | "on-hold" | "ended" | "stopped" | "completed" | "cancelled" | "entered-in-error" | "draft" | "unknown",
           intent?: "proposal" | "plan" | "order" | "original_order" | "reflex_order" | "filler_order" | "instance_order",
           category?:  "inpatient" | "outpatient" | "community" | "discharge",
@@ -272,6 +257,10 @@ export function MedicationRequestQuestion({
         ]}
         className="rounded-lg border p-4"
       >
+        <Label className="text-base font-medium">
+          {question.text}
+          {question.required && <span className="ml-1 text-red-500">*</span>}
+        </Label>
         {medications.length > 0 && (
           <div className="rounded-lg border space-y-4">
             <ul className="space-y-2 divide-y-2 divide-gray-200 divide-dashed">
@@ -301,7 +290,6 @@ export function MedicationRequestQuestion({
     </div>
   );
 }
-
 export const MedicationRequestItem: React.FC<{
   medication: MedicationRequest;
   disabled?: boolean;
@@ -317,7 +305,6 @@ export const MedicationRequestItem: React.FC<{
       dosage_instruction: [{ ...dosageInstruction, ...updates }],
     });
   };
-
   return (
     <div className="p-3 justify-between group focus-within:ring-2 ring-gray-300 rounded-lg space-y-2">
       <div className="flex items-center justify-between">
@@ -403,7 +390,6 @@ export const MedicationRequestItem: React.FC<{
             />
           </div>
         </div>
-
         <div className="flex gap-2">
           <div className="flex-1">
             <Label className="mb-1 block text-sm font-medium pr-4">Site</Label>
@@ -416,7 +402,6 @@ export const MedicationRequestItem: React.FC<{
             />
           </div>
         </div>
-
         <div className="flex items-center gap-2 mt-2">
           <Checkbox
             id={`prn-checkbox-${medication.medication?.code}`}
@@ -437,7 +422,6 @@ export const MedicationRequestItem: React.FC<{
             As Needed / PRN
           </Label>
         </div>
-
         {medication.dosage_instruction[0]?.as_needed_boolean ? (
           <div className="flex gap-2">
             <div className="flex-1">
@@ -485,7 +469,6 @@ export const MedicationRequestItem: React.FC<{
             </div>
           </div>
         )}
-
         <div className="flex gap-2">
           <div className="flex-1">
             <Label className="mb-1 block text-sm font-medium">
@@ -511,14 +494,12 @@ export const MedicationRequestItem: React.FC<{
           </div>
         </div>
       </div>
-
       {/* <div className="font-mono text-xs whitespace-pre-wrap mt-8">
         {JSON.stringify(medication, null, 2)}
       </div> */}
     </div>
   );
 };
-
 const reverseFrequencyOption = (
   option: MedicationRequest["dosage_instruction"][0]["timing"],
 ) => {
@@ -529,7 +510,6 @@ const reverseFrequencyOption = (
       value.timing.repeat.period === option?.repeat?.period,
   )?.[0] as keyof typeof FREQUENCY_OPTIONS;
 };
-
 // TODO: verify period_unit is correct
 const FREQUENCY_OPTIONS = {
   BD: {

diff --git a/src/components/Questionnaire/QuestionnaireForm.tsx b/src/components/Questionnaire/QuestionnaireForm.tsx
@@ -431,14 +431,14 @@ export function QuestionnaireForm({
         )}
 
         {/* Add a Preview of the QuestionnaireForm */}
-        {import.meta.env.DEV && (
+        {/* {import.meta.env.DEV && (
           <div className="p-4 space-y-6">
             <h2 className="text-xl font-semibold">QuestionnaireForm</h2>
             <pre className="text-sm text-muted-foreground">
               {JSON.stringify(questionnaireForms, null, 2)}
             </pre>
           </div>
-        )}
+        )} */}
       </div>
     </div>
   );

diff --git a/src/components/Schedule/Appointments/AppointmentDetailsPage.tsx b/src/components/Schedule/Appointments/AppointmentDetailsPage.tsx
@@ -363,7 +363,14 @@ const AppointmentActions = ({
   const isToday = isSameDay(appointment.token_slot.start_datetime, new Date());
 
   if (["fulfilled", "cancelled", "entered_in_error"].includes(currentStatus)) {
-    return null;
+    return (
+      <div className="flex flex-col gap-2 w-64 mx-auto">
+        <Button variant="outline" onClick={onViewPatient} size="lg">
+          <PersonIcon className="size-4 mr-2" />
+          {t("view_patient")}
+        </Button>
+      </div>
+    );
   }
 
   if (!["booked", "checked_in", "in_consultation"].includes(currentStatus)) {