Add visit section

src/app/(dashboard)/patients/[id]/[list]/page.tsx

@@ -1,8 +1,7 @@
 export default async function Page({
-    params,
-  }: {
-    params: { list: string, id: string };
-  }) {
-    return <div>{params.list}</div>;
-  }
-
+  params,
+}: {
+  params: { list: string; id: string };
+}) {
+  return <div>{params.list}</div>;
+}

src/app/(dashboard)/patients/[id]/fetch.ts

@@ -17,6 +17,7 @@ export const fetchCarePlan = async (
       params: {
         subject: id,
         status: "active",
+        _sort: "-_lastUpdated",
       },
     });
 

src/app/(dashboard)/patients/[id]/page.tsx

@@ -11,6 +11,7 @@ import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
 import { fhirR4 } from "@smile-cdr/fhirts";
 import Duplicates from "./components/duplicates";
 import PatientInfo from "./components/patientInfo";
+import Link from "next/link";
 
 export const maxDuration = 60;
 
@@ -45,7 +46,7 @@ export default async function Page({ params }: { params: { id: string } }) {
           {patient && <PatientInfo patient={patient} carePlan={carePlan} />}
         </div>
         <TabGroup>
-          <TabList className="flex gap-4 tabs tabs-boxed">
+          <TabList className="flex flex-row items-center flex-wrap gap-4 tabs tabs-boxed">
             {tabs
               .filter((e) => e.show)
               .map((tab) => (
@@ -54,6 +55,11 @@ export default async function Page({ params }: { params: { id: string } }) {
                   {tab.count && <span className="badge">{tab.count}</span>}
                 </Tab>
               ))}
+            <div className="flex flex-row justify-end flex-1">
+              <Link href={`${params.id}/visits`} className="btn btn-secondary">
+                Visits
+              </Link>
+            </div>
           </TabList>
           <TabPanels className="mt-3">
             <TabPanel key="general" className="rounded-xl bg-white/5 p-3">

src/app/(dashboard)/patients/[id]/visits/fetch.ts

@@ -0,0 +1,45 @@
+import { fhirServer } from "@/lib/api/axios";
+import { fhirR4 } from "@smile-cdr/fhirts";
+
+interface CarePlanListItem {
+  id: string;
+  title: string;
+  status: string;
+  intent: string;
+  period?: Date | string;
+  visit: string;
+}
+
+export const fetchData = async (id: string): Promise<CarePlanListItem[] | null> => {
+  try {
+    const res = await fhirServer.get("/CarePlan", {
+      params: {
+        subject: id,
+        _sort: "-date",
+      },
+    });
+
+    const carePlans: CarePlanListItem[] = res.data.entry.map((entry: any) => {
+      const resource = entry.resource as fhirR4.CarePlan;
+      const data: CarePlanListItem = {
+        id: resource.id ?? "",
+        title: resource.title ?? "NA",
+        status: resource.status ?? "NA",
+        intent: resource.intent ?? "NA",
+        period: resource.period?.start,
+        visit:
+          resource.category?.find(
+            (e) =>
+              e?.coding?.[0].system ==
+              "https://d-tree.org/fhir/care-plan-visit-number"
+          )?.coding?.[0].code ?? "NA",
+      };
+      return data;
+    });
+
+    return carePlans;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};

src/app/(dashboard)/patients/[id]/visits/page.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { fetchData } from "./fetch";
+
+type Props = {
+  params: { id: string };
+};
+
+const Visits = async ({ params: { id } }: Props) => {
+  const data = await fetchData(id);
+  return (
+    <div className="container">
+      <div className="flex flex-col gap-4 w-full">
+        {data?.map((item) => (
+          <div
+            key={item.id}
+            className="card card-compact bg-base-100 shadow-xl w-full"
+          >
+            <div className="card-body">
+              <h2 className="card-title">{item.title}</h2>
+              <div className="flex flex-row gap-2">
+                <span className="badge">Visit {item.visit}</span>
+                <span className="badge badge-primary">
+                  Status {item.status}
+                </span>
+                <span className="badge">Intent {item.intent}</span>
+              </div>
+              <p>{item.period?.toString()}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Visits;