Minor fixes in resource creation form

src/components/Resource/ResourceCreate.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
-import { navigate, useQueryParams } from "raviger";
+import { Link, navigate, useQueryParams } from "raviger";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -83,13 +83,20 @@ export default function ResourceCreate(props: ResourceProps) {
 
   const { data: facilityData } = useQuery({
     queryKey: ["facility", facilityId],
-    queryFn: () =>
-      query(routes.getAnyFacility, {
-        pathParams: { id: String(facilityId) },
-      }),
+    queryFn: query(routes.getAnyFacility, {
+      pathParams: { id: String(facilityId) },
+    }),
     enabled: !!facilityId,
   });
 
+  const { data: patientData } = useQuery({
+    queryKey: ["patient", related_patient],
+    queryFn: query(routes.patient.getPatient, {
+      pathParams: { id: String(related_patient) },
+    }),
+    enabled: !!related_patient,
+  });
+
   const form = useForm<ResourceFormValues>({
     resolver: zodResolver(resourceFormSchema),
     defaultValues: {
@@ -167,16 +174,23 @@ export default function ResourceCreate(props: ResourceProps) {
         <Card className="mt-4">
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-              {related_patient && (
-                <Alert>
-                  <div className="flex items-center gap-2">
-                    <CareIcon icon="l-user" className="h-5 w-5 text-blue-700" />
-                    <AlertDescription className="text-sm text-blue-700">
-                      {t("linked_patient")}:{" "}
-                      <span className="font-medium">{related_patient}</span>
-                    </AlertDescription>
-                  </div>
-                </Alert>
+              {patientData && (
+                <Link
+                  href={`/facility/${facilityId}/patient/${related_patient}/demography`}
+                >
+                  <Alert>
+                    <div className="flex items-center gap-2">
+                      <CareIcon
+                        icon="l-user"
+                        className="h-5 w-5 text-blue-700"
+                      />
+                      <AlertDescription className="text-sm text-blue-700">
+                        {t("linked_patient")}:{" "}
+                        <span className="font-medium">{patientData.name}</span>
+                      </AlertDescription>
+                    </div>
+                  </Alert>
+                </Link>
               )}
 
               <div className="space-y-6">