Remove EncounterContext; Add MedicationStatement prefill

src/components/Medicine/MedicationRequestTable/index.tsx

@@ -13,7 +13,6 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import Loading from "@/components/Common/Loading";
-import { useEncounter } from "@/components/Facility/ConsultationDetails/EncounterContext";
 
 import query from "@/Utils/request/query";
 import { classNames } from "@/Utils/utils";
@@ -23,6 +22,8 @@ import medicationRequestApi from "@/types/emr/medicationRequest/medicationReques
 interface Props {
   readonly?: boolean;
   facilityId: string;
+  patientId: string;
+  encounterId: string;
 }
 
 const FREQUENCY_DISPLAY: Record<string, { code: string; meaning: string }> = {
@@ -45,21 +46,20 @@ function getFrequencyDisplay(
   return FREQUENCY_DISPLAY[key];
 }
 
-export default function MedicationRequestTable({ facilityId }: Props) {
-  const { patient, encounter } = useEncounter();
-
-  const patientId = patient?.id;
-  const encounterId = encounter?.id;
-
+export default function MedicationRequestTable({
+  facilityId,
+  patientId,
+  encounterId,
+}: Props) {
   const [searchQuery, setSearchQuery] = useState("");
 
   const { data: medications, isLoading: loading } = useQuery({
     queryKey: ["medications", patientId],
     queryFn: query(medicationRequestApi.list, {
-      pathParams: { patientId: encounter?.patient?.id || "" },
+      pathParams: { patientId: patientId },
       queryParams: { encounter: encounterId },
     }),
-    enabled: !!encounter?.patient?.id,
+    enabled: !!patientId,
   });
 
   const filteredMedications = medications?.results?.filter(

src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx

@@ -2,9 +2,12 @@ import {
   MinusCircledIcon,
   QuestionMarkCircledIcon,
   TextAlignLeftIcon,
+  TrashIcon,
 } from "@radix-ui/react-icons";
-import React from "react";
+import { useQuery } from "@tanstack/react-query";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 
 import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 
@@ -20,20 +23,29 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 import ValueSetSelect from "@/components/Questionnaire/ValueSetSelect";
 
+import query from "@/Utils/request/query";
 import {
   MEDICATION_STATEMENT_STATUS,
   MedicationStatement,
   MedicationStatementInformationSourceType,
   MedicationStatementStatus,
 } from "@/types/emr/medicationStatement";
+import medicationStatementApi from "@/types/emr/medicationStatement/medicationStatementApi";
 import { Code } from "@/types/questionnaire/code";
 import { QuestionnaireResponse } from "@/types/questionnaire/form";
 import { Question } from "@/types/questionnaire/question";
 
 interface MedicationStatementQuestionProps {
+  patientId: string;
   question: Question;
   questionnaireResponse: QuestionnaireResponse;
   updateQuestionnaireResponseCB: (response: QuestionnaireResponse) => void;
@@ -56,12 +68,39 @@ export function MedicationStatementQuestion({
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
+  patientId,
 }: MedicationStatementQuestionProps) {
   const { t } = useTranslation();
 
   const medications =
     (questionnaireResponse.values?.[0]?.value as MedicationStatement[]) || [];
 
+  const { data: patientMedications } = useQuery({
+    queryKey: ["medication_statements", patientId],
+    queryFn: query(medicationStatementApi.list, {
+      pathParams: { patientId },
+    }),
+  });
+
+  useEffect(() => {
+    if (patientMedications?.results && !medications.length) {
+      updateQuestionnaireResponseCB({
+        ...questionnaireResponse,
+        values: [
+          {
+            type: "medication_statement",
+            value: patientMedications.results,
+          },
+        ],
+      });
+      if (patientMedications.count > patientMedications.results.length) {
+        toast.info(
+          `Showing first ${patientMedications.results.length} of ${patientMedications.count} medication statements`,
+        );
+      }
+    }
+  }, [patientMedications]);
+
   const handleAddMedication = (medication: Code) => {
     const newMedications: Omit<
       MedicationStatement,
@@ -82,11 +121,26 @@ export function MedicationStatementQuestion({
   };
 
   const handleRemoveMedication = (index: number) => {
-    const newMedications = medications.filter((_, i) => i !== index);
-    updateQuestionnaireResponseCB({
-      ...questionnaireResponse,
-      values: [{ type: "medication_statement", value: newMedications }],
-    });
+    const medication = medications[index];
+    if (medication.id) {
+      // For existing records, update status to entered-in-error
+      const newMedications = medications.map((med, i) =>
+        i === index
+          ? { ...med, status: "entered_in_error" as MedicationStatementStatus }
+          : med,
+      );
+      updateQuestionnaireResponseCB({
+        ...questionnaireResponse,
+        values: [{ type: "medication_statement", value: newMedications }],
+      });
+    } else {
+      // For new records, remove them completely
+      const newMedications = medications.filter((_, i) => i !== index);
+      updateQuestionnaireResponseCB({
+        ...questionnaireResponse,
+        values: [{ type: "medication_statement", value: newMedications }],
+      });
+    }
   };
 
   const handleUpdateMedication = (
@@ -181,14 +235,33 @@ const MedicationStatementItem: React.FC<{
               </SelectContent>
             </Select>
           </div>
-          <Button
-            variant="secondary"
-            size="icon"
-            onClick={onRemove}
-            disabled={disabled}
-          >
-            <MinusCircledIcon className="size-4" />
-          </Button>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant={medication.id ? "ghost" : "secondary"}
+                  size="icon"
+                  onClick={onRemove}
+                  disabled={
+                    disabled || medication.status === "entered_in_error"
+                  }
+                >
+                  {medication.id ? (
+                    <TrashIcon className="size-4 text-destructive" />
+                  ) : (
+                    <MinusCircledIcon className="size-4" />
+                  )}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {medication.status === "entered_in_error"
+                  ? t("medication_already_marked_as_error")
+                  : medication.id
+                    ? t("mark_as_entered_in_error")
+                    : t("remove_medication")}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </div>
       </div>
       <div className="flex flex-col gap-4">

src/pages/Encounters/EncounterShow.tsx

@@ -6,7 +6,6 @@ import Loading from "@/components/Common/Loading";
 import PageHeadTitle from "@/components/Common/PageHeadTitle";
 import PageTitle from "@/components/Common/PageTitle";
 import ErrorPage from "@/components/ErrorPages/DefaultErrorPage";
-import { EncounterProvider } from "@/components/Facility/ConsultationDetails/EncounterContext";
 import PatientInfoCard from "@/components/Patient/PatientInfoCard";
 
 import { useCareAppConsultationTabs } from "@/hooks/useCareApps";
@@ -177,12 +176,7 @@ export const EncounterShow = (props: Props) => {
     }`;
 
   return (
-    <EncounterProvider
-      initialContext={{
-        encounter: encounterData,
-        patient: encounterData.patient,
-      }}
-    >
+    <div>
       <nav className="relative flex flex-wrap items-start justify-between">
         <PageTitle
           title={t("encounter")}
@@ -288,6 +282,6 @@ export const EncounterShow = (props: Props) => {
           <SelectedTab {...encounterTabProps} />
         </div>
       </div>
-    </EncounterProvider>
+    </div>
   );
 };

src/pages/Encounters/tabs/EncounterMedicinesTab.tsx

@@ -5,7 +5,11 @@ import { EncounterTabProps } from "@/pages/Encounters/EncounterShow";
 export const EncounterMedicinesTab = (props: EncounterTabProps) => {
   return (
     <div className="flex flex-col gap-16">
-      <MedicationRequestTable facilityId={props.facilityId} />
+      <MedicationRequestTable
+        facilityId={props.facilityId}
+        patientId={props.patient.id}
+        encounterId={props.encounter.id}
+      />
     </div>
   );
 };

src/types/emr/medicationStatement/medicationStatementApi.ts

@@ -0,0 +1,14 @@
+import { Type } from "@/Utils/request/api";
+import { PaginatedResponse } from "@/Utils/request/types";
+
+import { MedicationStatement } from "../medicationStatement";
+
+const medicationStatementApi = {
+  list: {
+    path: "/api/v1/patient/{patientId}/medication/statement/",
+    method: "GET",
+    TRes: Type<PaginatedResponse<MedicationStatement>>(),
+  },
+} as const;
+
+export default medicationStatementApi;