Prefill Structured Data; Add Edit Links for Structured

public/locale/en.json

@@ -1343,6 +1343,7 @@
   "next_week_short": "Next wk",
   "no": "No",
   "no_address_provided": "No address provided",
+  "no_allergies_recorded": "No allergies recorded",
   "no_appointments": "No appointments found",
   "no_attachments_found": "This communication has no attachments.",
   "no_availabilities_yet": "No availabilities yet",

src/Utils/request/api.tsx

@@ -20,7 +20,6 @@ import {
   AppointmentPatientRegister,
 } from "@/pages/Patient/Utils";
 import { Encounter, EncounterEditRequest } from "@/types/emr/encounter";
-import { MedicationRequest } from "@/types/emr/medicationRequest";
 import { MedicationStatement } from "@/types/emr/medicationStatement";
 import { PartialPatientModel, Patient } from "@/types/emr/newPatient";
 import {
@@ -645,15 +644,6 @@ const routes = {
     },
   },
 
-  // Medication
-  medicationRequest: {
-    list: {
-      path: "/api/v1/patient/{patientId}/medication/request/",
-      method: "GET",
-      TRes: Type<PaginatedResponse<MedicationRequest>>(),
-    },
-  },
-
   medicationStatement: {
     list: {
       path: "/api/v1/patient/{patientId}/medication/statement/",

src/components/Medicine/MedicineAdministrationSheet/index.tsx → src/components/Medicine/MedicationRequestTable/index.tsx

@@ -1,4 +1,6 @@
+import { useQuery } from "@tanstack/react-query";
 import { t } from "i18next";
+import { PencilIcon } from "lucide-react";
 import { Link } from "raviger";
 import { useState } from "react";
 
@@ -13,12 +15,10 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import Loading from "@/components/Common/Loading";
 import { useEncounter } from "@/components/Facility/ConsultationDetails/EncounterContext";
 
-import useSlug from "@/hooks/useSlug";
-
-import routes from "@/Utils/request/api";
-import useTanStackQueryInstead from "@/Utils/request/useQuery";
+import query from "@/Utils/request/query";
 import { classNames } from "@/Utils/utils";
 import { MedicationRequest } from "@/types/emr/medicationRequest";
+import medicationRequestApi from "@/types/emr/medicationRequest/medicationRequestApi";
 
 interface Props {
   readonly?: boolean;
@@ -45,21 +45,22 @@ function getFrequencyDisplay(
   return FREQUENCY_DISPLAY[key];
 }
 
-const MedicineAdministrationSheet = ({ facilityId }: Props) => {
-  const encounterId = useSlug("encounter");
-  const { patient } = useEncounter();
+export default function MedicationRequestTable({ facilityId }: Props) {
+  const { patient, encounter } = useEncounter();
+
+  const patientId = patient?.id;
+  const encounterId = encounter?.id;
+
   const [searchQuery, setSearchQuery] = useState("");
 
-  const { data: medications, loading } = useTanStackQueryInstead(
-    routes.medicationRequest.list,
-    {
-      pathParams: { patientId: patient!.id },
-      query: {
-        encounter: encounterId,
-        limit: 100,
-      },
-    },
-  );
+  const { data: medications, isLoading: loading } = useQuery({
+    queryKey: ["medications", patientId],
+    queryFn: query(medicationRequestApi.list, {
+      pathParams: { patientId: encounter?.patient?.id || "" },
+      queryParams: { encounter: encounterId },
+    }),
+    enabled: !!encounter?.patient?.id,
+  });
 
   const filteredMedications = medications?.results?.filter(
     (med: MedicationRequest) => {
@@ -103,6 +104,14 @@ const MedicineAdministrationSheet = ({ facilityId }: Props) => {
         title="Prescriptions"
         options={
           <div className="flex items-center gap-2">
+            <Button asChild variant="outline" size="sm">
+              <Link
+                href={`/facility/${facilityId}/patient/${patientId}/encounter/${encounterId}/questionnaire/medication_request`}
+              >
+                <PencilIcon />
+                Edit
+              </Link>
+            </Button>
             <Button asChild variant="outline" size="sm">
               <Link
                 href={`/facility/${facilityId}/encounter/${encounterId}/prescriptions/print`}
@@ -185,7 +194,7 @@ const MedicineAdministrationSheet = ({ facilityId }: Props) => {
       </div>
     </div>
   );
-};
+}
 
 const PrescriptionEntry = ({
   medication,
@@ -349,5 +358,3 @@ const PrescriptionEntry = ({
     </div>
   );
 };
-
-export default MedicineAdministrationSheet;

src/components/Patient/allergy/list.tsx

@@ -1,5 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
 import { t } from "i18next";
+import { PencilIcon } from "lucide-react";
+import { Link } from "raviger";
+import { ReactNode } from "react";
 
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -20,11 +23,16 @@ import { AllergyIntolerance } from "@/types/emr/allergyIntolerance/allergyIntole
 import allergyIntoleranceApi from "@/types/emr/allergyIntolerance/allergyIntoleranceApi";
 
 interface AllergyListProps {
+  facilityId?: string;
   patientId: string;
   encounterId?: string;
 }
 
-export function AllergyList({ patientId, encounterId }: AllergyListProps) {
+export function AllergyList({
+  facilityId,
+  patientId,
+  encounterId,
+}: AllergyListProps) {
   const { data: allergies, isLoading } = useQuery({
     queryKey: ["allergies", patientId, encounterId],
     queryFn: query(allergyIntoleranceApi.getAllergy, {
@@ -35,27 +43,29 @@ export function AllergyList({ patientId, encounterId }: AllergyListProps) {
 
   if (isLoading) {
     return (
-      <Card>
-        <CardHeader>
-          <CardTitle>Allergies</CardTitle>
-        </CardHeader>
+      <AllergyListLayout
+        facilityId={facilityId}
+        patientId={patientId}
+        encounterId={encounterId}
+      >
         <CardContent>
           <Skeleton className="h-[100px] w-full" />
         </CardContent>
-      </Card>
+      </AllergyListLayout>
     );
   }
 
   if (!allergies?.results?.length) {
     return (
-      <Card>
-        <CardHeader>
-          <CardTitle>Allergies</CardTitle>
-        </CardHeader>
+      <AllergyListLayout
+        facilityId={facilityId}
+        patientId={patientId}
+        encounterId={encounterId}
+      >
         <CardContent>
-          <p className="text-muted-foreground">No allergies recorded</p>
+          <p className="text-muted-foreground">{t("no_allergies_recorded")}</p>
         </CardContent>
-      </Card>
+      </AllergyListLayout>
     );
   }
 
@@ -84,23 +94,30 @@ export function AllergyList({ patientId, encounterId }: AllergyListProps) {
   };
 
   return (
-    <Card className="p-0">
-      <CardHeader className="px-4 py-0 pt-4">
-        <CardTitle>{t("allergies")}</CardTitle>
-      </CardHeader>
-      <CardContent className="p-2">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{t("allergen")}</TableHead>
-              <TableHead>{t("category")}</TableHead>
-              <TableHead>{t("status")}</TableHead>
-              <TableHead>{t("criticality")}</TableHead>
-              <TableHead>{t("created_by")}</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {allergies.results.map((allergy: AllergyIntolerance) => (
+    <AllergyListLayout
+      facilityId={facilityId}
+      patientId={patientId}
+      encounterId={encounterId}
+    >
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>{t("allergen")}</TableHead>
+            <TableHead>{t("category")}</TableHead>
+            <TableHead>{t("status")}</TableHead>
+            <TableHead>{t("criticality")}</TableHead>
+            <TableHead>{t("created_by")}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {allergies.results
+            .sort((a, _b) => {
+              if (a.clinical_status === "inactive") {
+                return 1;
+              }
+              return -1;
+            })
+            .map((allergy: AllergyIntolerance) => (
               <TableRow key={allergy.id}>
                 <TableCell className="font-medium">
                   {allergy.code.display}
@@ -140,9 +157,38 @@ export function AllergyList({ patientId, encounterId }: AllergyListProps) {
                 </TableCell>
               </TableRow>
             ))}
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
+        </TableBody>
+      </Table>
+    </AllergyListLayout>
   );
 }
+
+const AllergyListLayout = ({
+  facilityId,
+  patientId,
+  encounterId,
+  children,
+}: {
+  facilityId?: string;
+  patientId: string;
+  encounterId?: string;
+  children: ReactNode;
+}) => {
+  return (
+    <Card>
+      <CardHeader className="px-4 py-0 pt-4 flex justify-between flex-row">
+        <CardTitle>{t("allergies")}</CardTitle>
+        {facilityId && encounterId && (
+          <Link
+            href={`/facility/${facilityId}/patient/${patientId}/encounter/${encounterId}/questionnaire/allergy_intolerance`}
+            className="flex items-center gap-1 text-sm hover:text-gray-500"
+          >
+            <PencilIcon size={12} />
+            {t("edit")}
+          </Link>
+        )}
+      </CardHeader>
+      {children}
+    </Card>
+  );
+};

src/components/Patient/diagnosis/list.tsx

@@ -1,4 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
+import { t } from "i18next";
+import { PencilIcon } from "lucide-react";
+import { Link } from "raviger";
+import { ReactNode } from "react";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -11,9 +15,14 @@ import { DiagnosisTable } from "./DiagnosisTable";
 interface DiagnosisListProps {
   patientId: string;
   encounterId?: string;
+  facilityId?: string;
 }
 
-export function DiagnosisList({ patientId, encounterId }: DiagnosisListProps) {
+export function DiagnosisList({
+  patientId,
+  encounterId,
+  facilityId,
+}: DiagnosisListProps) {
   const { data: diagnoses, isLoading } = useQuery({
     queryKey: ["diagnosis", patientId, encounterId],
     queryFn: query(diagnosisApi.listDiagnosis, {
@@ -24,38 +33,65 @@ export function DiagnosisList({ patientId, encounterId }: DiagnosisListProps) {
 
   if (isLoading) {
     return (
-      <Card>
-        <CardHeader>
-          <CardTitle>Diagnoses</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <Skeleton className="h-[100px] w-full" />
-        </CardContent>
-      </Card>
+      <DiagnosisListLayout
+        facilityId={facilityId}
+        patientId={patientId}
+        encounterId={encounterId}
+      >
+        <Skeleton className="h-[100px] w-full" />
+      </DiagnosisListLayout>
     );
   }
 
   if (!diagnoses?.results?.length) {
     return (
-      <Card>
-        <CardHeader>
-          <CardTitle>Diagnoses</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p className="text-muted-foreground">No diagnoses recorded</p>
-        </CardContent>
-      </Card>
+      <DiagnosisListLayout
+        facilityId={facilityId}
+        patientId={patientId}
+        encounterId={encounterId}
+      >
+        <p className="text-muted-foreground">No diagnoses recorded</p>
+      </DiagnosisListLayout>
     );
   }
 
   return (
-    <Card className="p-0">
-      <CardHeader className="px-4 py-0 pt-4">
-        <CardTitle>Diagnoses</CardTitle>
+    <DiagnosisListLayout
+      facilityId={facilityId}
+      patientId={patientId}
+      encounterId={encounterId}
+    >
+      <DiagnosisTable diagnoses={diagnoses.results} />
+    </DiagnosisListLayout>
+  );
+}
+
+const DiagnosisListLayout = ({
+  facilityId,
+  patientId,
+  encounterId,
+  children,
+}: {
+  facilityId?: string;
+  patientId: string;
+  encounterId?: string;
+  children: ReactNode;
+}) => {
+  return (
+    <Card>
+      <CardHeader className="px-4 py-0 pt-4 flex justify-between flex-row">
+        <CardTitle>{t("diagnoses")}</CardTitle>
+        {facilityId && encounterId && (
+          <Link
+            href={`/facility/${facilityId}/patient/${patientId}/encounter/${encounterId}/questionnaire/diagnosis`}
+            className="flex items-center gap-1 text-sm hover:text-gray-500"
+          >
+            <PencilIcon size={12} />
+            {t("edit")}
+          </Link>
+        )}
       </CardHeader>
-      <CardContent className="p-2">
-        <DiagnosisTable diagnoses={diagnoses.results} />
-      </CardContent>
+      <CardContent>{children}</CardContent>
     </Card>
   );
-}
+};