From 96f04f88cf0ddc09b9dc30209f2171a43916e6e2 Mon Sep 17 00:00:00 2001
From: Jacob John Jeevan <mail@jacobjeevan.me>
Date: Fri, 7 Mar 2025 12:01:59 +0530
Subject: [PATCH] patient questionnaire minor fix

---
 .../QuestionnaireResponsesList.tsx            | 23 +-----------
 .../Patient/PatientDetailsTab/index.tsx       |  4 +--
 .../PatientDetailsTab/patientUpdates.tsx      | 36 +++++++++++++++++++
 3 files changed, 39 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Patient/PatientDetailsTab/patientUpdates.tsx

diff --git a/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx b/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx
index 4f9c245594a..22551e6c617 100644
--- a/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx
+++ b/src/components/Facility/ConsultationDetails/QuestionnaireResponsesList.tsx
@@ -1,14 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
 import { t } from "i18next";
-import { Link, useQueryParams } from "raviger";
+import { useQueryParams } from "raviger";
 import { Trans, useTranslation } from "react-i18next";
 
 import { cn } from "@/lib/utils";
 
-import CareIcon from "@/CAREUI/icons/CareIcon";
-
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 
@@ -298,7 +295,6 @@ function ResponseCard({
 
 export default function QuestionnaireResponsesList({
   patientId,
-  facilityId,
   isPrintPreview = false,
   onlyUnstructured,
 }: Props) {
@@ -325,23 +321,6 @@ export default function QuestionnaireResponsesList({
   return (
     <div className="mt-4 gap-4">
       <div className="max-w-full">
-        <div className="flex justify-between items-center mb-4">
-          <div className="mr-4 text-xl font-bold text-secondary-900">
-            {t("updates")}
-          </div>
-          <Button asChild variant="outline_primary">
-            <Link
-              href={
-                facilityId
-                  ? `/facility/${facilityId}/patient/${patientId}/questionnaire`
-                  : `/patient/${patientId}/questionnaire`
-              }
-            >
-              <CareIcon icon="l-plus" className="mr-2" />
-              {t("add_patient_updates")}
-            </Link>
-          </Button>
-        </div>
         {isLoading ? (
           <div className="grid gap-5">
             <CardListSkeleton count={RESULTS_PER_PAGE_LIMIT} />
diff --git a/src/components/Patient/PatientDetailsTab/index.tsx b/src/components/Patient/PatientDetailsTab/index.tsx
index 8b5e14145e7..05a45162d0d 100644
--- a/src/components/Patient/PatientDetailsTab/index.tsx
+++ b/src/components/Patient/PatientDetailsTab/index.tsx
@@ -1,4 +1,3 @@
-import QuestionnaireResponsesList from "@/components/Facility/ConsultationDetails/QuestionnaireResponsesList";
 import EncounterHistory from "@/components/Patient/PatientDetailsTab//EncounterHistory";
 import { HealthProfileSummary } from "@/components/Patient/PatientDetailsTab//HealthProfileSummary";
 import { Demography } from "@/components/Patient/PatientDetailsTab/Demography";
@@ -9,6 +8,7 @@ import { Appointments } from "./Appointments";
 import { PatientFilesTab } from "./PatientFiles";
 import { PatientUsers } from "./PatientUsers";
 import { ResourceRequests } from "./ResourceRequests";
+import { Updates } from "./patientUpdates";
 
 export interface PatientProps {
   facilityId?: string;
@@ -35,7 +35,7 @@ export const patientTabs = [
   },
   {
     route: "updates",
-    component: QuestionnaireResponsesList,
+    component: Updates,
   },
   {
     route: "resource_requests",
diff --git a/src/components/Patient/PatientDetailsTab/patientUpdates.tsx b/src/components/Patient/PatientDetailsTab/patientUpdates.tsx
new file mode 100644
index 00000000000..6e387b8e26a
--- /dev/null
+++ b/src/components/Patient/PatientDetailsTab/patientUpdates.tsx
@@ -0,0 +1,36 @@
+import { Link } from "raviger";
+import { useTranslation } from "react-i18next";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import { Button } from "@/components/ui/button";
+
+import QuestionnaireResponsesList from "@/components/Facility/ConsultationDetails/QuestionnaireResponsesList";
+
+import { PatientProps } from ".";
+
+export const Updates = (props: PatientProps) => {
+  const { patientId, facilityId } = props;
+  const { t } = useTranslation();
+
+  return (
+    <div className="mt-4 px-3 md:px-0">
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-2xl font-semibold leading-tight">{t("updates")}</h2>
+        <Button asChild variant="outline_primary">
+          <Link
+            href={
+              facilityId
+                ? `/facility/${facilityId}/patient/${patientId}/questionnaire`
+                : `/patient/${patientId}/questionnaire`
+            }
+          >
+            <CareIcon icon="l-plus" className="mr-2" />
+            {t("add_patient_updates")}
+          </Link>
+        </Button>
+      </div>
+      <QuestionnaireResponsesList patientId={patientId} />
+    </div>
+  );
+};