fix try errors

package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@headlessui/react": "^2.0.4",
+    "@headlessui/react": "0.0.0-insiders.d71fb9c",
     "@hookform/resolvers": "^3.3.1",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-collapsible": "^1.1.0",
@@ -24,9 +24,6 @@
     "@smile-cdr/fhirts": "^2.0.7",
     "@tailwindcss/typography": "^0.5.15",
     "@tanstack/react-query": "^4.33.0",
-    "@types/node": "20.5.7",
-    "@types/react": "18.2.21",
-    "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
     "axios": "^1.5.0",
     "class-variance-authority": "^0.7.0",
@@ -58,8 +55,11 @@
     "zod": "^3.22.2"
   },
   "devDependencies": {
+    "@types/node": "20.5.7",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.1",
     "@types/crypto-js": "^4.2.2",
     "@types/string-template": "^1.0.2",
     "daisyui": "^3.6.4"
   }
-}
+}

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

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

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

@@ -22,12 +22,13 @@ type TabItem = {
   show: boolean;
 };
 
-export default async function Page({ params }: { params: { id: string } }) {
-  const {
-    carePlanData: carePlan,
-    patient,
-    duplicates,
-  } = await fetchData(params.id);
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const { carePlanData: carePlan, patient, duplicates } = await fetchData(id);
 
   const tabs: TabItem[] = [
     { title: "Care Plan", id: "general", show: true },
@@ -56,7 +57,7 @@ export default async function Page({ params }: { params: { id: string } }) {
                 </Tab>
               ))}
             <div className="flex flex-row justify-end flex-1">
-              <Link href={`${params.id}/visits`} className="btn btn-secondary">
+              <Link href={`${id}/visits`} className="btn btn-secondary">
                 Visits
               </Link>
             </div>

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

@@ -3,10 +3,11 @@ import { fetchData } from "./fetch";
 import Link from "next/link";
 
 type Props = {
-  params: { id: string };
+  params: Promise<{ id: string }>;
 };
 
-const Visits = async ({ params: { id } }: Props) => {
+const Visits = async ({ params }: Props) => {
+  const { id } = await params;
   const data = await fetchData(id);
   return (
     <div className="container">

src/app/(dashboard)/patients/page.tsx

@@ -6,7 +6,7 @@ import Content from "./content";
 export default async function Page({
   searchParams,
 }: {
-  searchParams: { q: string };
+  searchParams: Promise<{ q: string }>;
 }) {
   const data = await fetchRequiredData();
   return (

src/app/(dashboard)/visit/[careplan]/page.tsx

@@ -3,10 +3,11 @@ import { fetchData, onCarePlanStatusChange } from "./action";
 import Components from "./component";
 
 type Props = {
-  params: { careplan: string };
+  params: Promise<{ careplan: string }>;
 };
 
-const Page = async ({ params: { careplan } }: Props) => {
+const Page = async ({ params }: Props) => {
+  const { careplan } = await params;
   const data = await fetchData(careplan);
   return (
     <div className="container">