updates

Author: sevenreup

pnpm-lock.yaml

@@ -1,14 +1,15 @@
 "use server";
 
 import { BinaryPatchData, pushResourceBundle } from "@/lib/fhir/bundle";
-import { fetchCarePlan } from "./fetch";
+import { createDetails, fetchCarePlan } from "./fetch";
 import {
   CarePlanData,
   CarePlanDataActivity,
 } from "../../../../lib/models/types";
 import { fhirR4 } from "@smile-cdr/fhirts";
 import { mapCarePlanToTask } from "@/lib/fhir/tasks";
 import { createJsonPatchUpdate } from "@/lib/utils";
+import { fhirServer } from "@/lib/api/axios";
 
 export const fixTasks = async (formData: FormData) => {
   const resourcesToUpdate: (fhirR4.Resource | BinaryPatchData)[] = [];
@@ -30,7 +31,6 @@ export const fixTasks = async (formData: FormData) => {
       const task = creatNewTask(data.careplan, activity);
       resourcesToUpdate.push(task);
     } else {
-
       if (!activity.isTaskAndCarePlanSameStatus && activity.taskReference) {
         activity.taskStatus = mapCarePlanToTask(
           activity.carePlanActivityStatus
@@ -80,6 +80,33 @@ export const fixTasks = async (formData: FormData) => {
   return refetchedCarePlan?.carePlanData;
 };
 
+export const fetchCarePlanVersion = async (
+  id: string,
+  version: number
+): Promise<CarePlanData | null> => {
+  try {
+    const res = await fhirServer.get(`/CarePlan/${id}/_history/${version}`);
+    return await createDetails(id, res.data);
+  } catch (error) {
+    console.log(error);
+    return null;
+  }
+};
+
+export const setCurrentVersion = async (
+  id: string,
+  version: number
+): Promise<CarePlanData | null> => {
+  try {
+    const res = await fhirServer.get(`/CarePlan/${id}/_history/${version}`);
+    await fhirServer.put(`/CarePlan/${id}`, res.data);
+    return await createDetails(id, res.data);
+  } catch (error) {
+    console.log(error);
+    return null;
+  }
+};
+
 const creatNewTask = (
   carePlan: CarePlanData,
   activity: CarePlanDataActivity

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

@@ -36,13 +36,15 @@ export const fetchCarePlan = async (
   }
 };
 
-const createDetails = async (
+
+export const createDetails = async (
   patienyId: string,
   carePlan: fhirR4.CarePlan
 ): Promise<CarePlanData> => {
   const tasks = await getTasksFromCarePlan(carePlan);
-  return {
+  const plan: CarePlanData = {
     id: carePlan.id ?? "",
+    version: Number.parseInt(carePlan.meta?.versionId ?? "1"),
     author: carePlan.author?.display,
     tags: carePlan?.meta?.tag ?? [],
     title: carePlan.title,
@@ -56,6 +58,7 @@ const createDetails = async (
           "https://d-tree.org/fhir/care-plan-visit-number"
       )?.coding?.[0].code ?? "NA",
   };
+  return plan;
 };
 
 const getTasksFromCarePlan = async (

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

@@ -1,5 +1,4 @@
-import { CarePlanContainer } from "./components/careplanContainer";
-import { fixTasks } from "./actions";
+import { fetchCarePlanVersion, fixTasks, setCurrentVersion } from "./actions";
 import { fetchCarePlan } from "./fetch";
 import { CarePlanData } from "../../../../lib/models/types";
 import { fhirServer } from "@/lib/api/axios";
@@ -12,6 +11,7 @@ import { fhirR4 } from "@smile-cdr/fhirts";
 import Duplicates from "./components/duplicates";
 import PatientInfo from "./components/patientInfo";
 import Link from "next/link";
+import CareplanViewer from "@/components/careplan/careplan-viewer";
 
 export const maxDuration = 60;
 
@@ -64,7 +64,12 @@ export default async function Page({ params }: { params: { id: string } }) {
           <TabPanels className="mt-3">
             <TabPanel key="general" className="rounded-xl bg-white/5 p-3">
               {carePlan && (
-                <CarePlanContainer data={carePlan} action={fixTasks} />
+                <CareplanViewer
+                  data={carePlan}
+                  fixCarePlan={fixTasks}
+                  toVersion={fetchCarePlanVersion}
+                  setCurrentVersion={setCurrentVersion}
+                />
               )}
               {!carePlan && (
                 <div className="flex flex-col gap-4 w-full p-8">

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

@@ -1,22 +1,26 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import ReactQueryProvider from "@/providers/reatc-query";
+import "./globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en" data-theme="cupcake">
-      <body className={inter.className + ""}>{children}</body>
+      <body className={inter.className + ""}>
+        <ReactQueryProvider>{children}</ReactQueryProvider>
+      </body>
     </html>
-  )
+  );
 }
+

src/app/layout.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { CarePlanData } from "@/lib/models/types";
+import React from "react";
+import { CarePlanContainer } from "./careplanContainer";
+
+type Props = {
+  data: CarePlanData;
+  fixCarePlan: (data: FormData) => Promise<any>;
+  toVersion: (id: string, version: number) => Promise<CarePlanData | null>;
+  setCurrentVersion: (
+    id: string,
+    version: number
+  ) => Promise<CarePlanData | null>;
+};
+
+const CareplanViewer = ({
+  toVersion,
+  setCurrentVersion,
+  data,
+  fixCarePlan,
+}: Props) => {
+  const [carePlan, setCarePlan] = React.useState(data);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(false);
+
+  const changeVersion = async (
+    action: () => Promise<CarePlanData | null>,
+    reload: boolean = false
+  ) => {
+    try {
+      setError(false);
+      setLoading(true);
+      const newCarePlan = await action();
+      if (newCarePlan == null) {
+        throw new Error("Could not fetch care plan");
+      }
+      setCarePlan(newCarePlan);
+      setLoading(false);
+      setError(false);
+      if (reload) {
+        window.location.reload();
+      }
+    } catch (error) {
+      console.error(error);
+      setError(true);
+    }
+  };
+
+  if (error) {
+    return <div>Something went wrong</div>;
+  }
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <CarePlanContainer
+      data={carePlan}
+      action={fixCarePlan}
+      latestVersion={data.version}
+      toVersion={(version) => {
+        changeVersion(async () => {
+          return await toVersion(data.id, version);
+        });
+      }}
+      setCurrentVersion={(version) => {
+        changeVersion(async () => {
+          return await setCurrentVersion(data.id, version);
+        }, true);
+      }}
+    />
+  );
+};
+
+export default CareplanViewer;

src/components/careplan/careplan-viewer.tsx

@@ -2,13 +2,23 @@
 
 import { CarePlanData, CarePlanDataActivity } from "@/lib/models/types";
 import { useEffect, useState } from "react";
+import { Button } from "../ui/button";
 
 type Props = {
   action: (data: FormData) => Promise<any>;
+  toVersion: (version: number) => void;
   data: CarePlanData;
+  latestVersion: number;
+  setCurrentVersion: (version: number) => void;
 };
 
-export const CarePlanContainer = ({ data, action }: Props) => {
+export const CarePlanContainer = ({
+  data,
+  action,
+  toVersion,
+  latestVersion,
+  setCurrentVersion,
+}: Props) => {
   const [careplan, setCarePlan] = useState<CarePlanData>(data);
   const [items, setItems] = useState<CarePlanDataActivity[]>();
   const [selectFix, setSelectFix] = useState<boolean>(false);
@@ -95,7 +105,17 @@ export const CarePlanContainer = ({ data, action }: Props) => {
         </div>
       )}
       <div className="flex flex-col gap-4">
-        <div>{careplan && <CarePlanSummary careplan={careplan} />}</div>
+        <div>
+          {careplan && (
+            <CarePlanSummary
+              careplan={careplan}
+              lastestVersion={latestVersion}
+              setCurrentVersion={setCurrentVersion}
+              previous={() => toVersion(careplan.version - 1)}
+              next={() => toVersion(careplan.version + 1)}
+            />
+          )}
+        </div>
         <h5 className="scroll-m-20 text-4xl font-bold tracking-tight">Tasks</h5>
         {careplan.activities?.map((activity: CarePlanDataActivity) => {
           return (
@@ -170,12 +190,47 @@ export const CarePlanContainer = ({ data, action }: Props) => {
   );
 };
 
-const CarePlanSummary = ({ careplan }: { careplan: CarePlanData }) => {
+const CarePlanSummary = ({
+  careplan,
+  lastestVersion,
+  previous,
+  next,
+  setCurrentVersion,
+}: {
+  careplan: CarePlanData;
+  lastestVersion: number;
+  previous: () => void;
+  next: () => void;
+  setCurrentVersion: (version: number) => void;
+}) => {
   return (
     <div>
       <details className="collapse bg-base-200">
         <summary className="collapse-title text-xl font-medium">
-          View Care Plan Details
+          <div className="flex flex-row justify-between w-full items-center">
+            <span>View Care Plan Details</span>
+            <div className="flex flex-row gap-2 items-center">
+              {careplan.version != lastestVersion && (
+                <Button onClick={() => setCurrentVersion(careplan.version)}>
+                  Set as Current version
+                </Button>
+              )}
+              {careplan.version > 1 && (
+                <Button variant="link" onClick={previous}>
+                  {" "}
+                  {"< "} Previous
+                </Button>
+              )}
+              <span className="badge badge-primary">
+                Version: {careplan.version}
+              </span>
+              {careplan.version < lastestVersion && (
+                <Button variant="link" onClick={next}>
+                  Next {" >"}
+                </Button>
+              )}
+            </div>
+          </div>
         </summary>
         <div className="collapse-content">
           <h6>{careplan.title}</h6>

src/app/(dashboard)/patients/[id]/components/careplanContainer.tsx src/components/careplan/careplanContainer.tsx

@@ -2,6 +2,7 @@ import { fhirR4 } from "@smile-cdr/fhirts";
 
 export type CarePlanData = {
   id: string;
+  version: number;
   title?: string;
   patientId: string;
   requester?: string;

src/lib/models/types.ts

@@ -0,0 +1,14 @@
+"use client";
+
+import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+
+const ReactQueryProvider = ({ children }: { children: React.ReactNode }) => {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+export default ReactQueryProvider;