Doc Patient page

src/app/(panels)/suite/doctor/dashboard/page.jsx

@@ -1,32 +1,35 @@
 "use client"
 
 import { PatientTable } from "./PatientTable"
+import { AppointmentList } from "./AppList"
 
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import axios from "axios";
 import { useUser } from '@clerk/nextjs';
 
+import React from "react";  
+
 
 export default function Dashboard() {
 
     const router = useRouter();
-	const { user } = useUser();
-	const [userData, setUserData] = useState(null);
+    const { user } = useUser();
+    const [userData, setUserData] = useState(null);
 
-	useEffect(() => {
-		if (user) {
-			axios.get(`/api/user?userId=${user.id}`).then(response => {
-				setUserData(response.data);
-			});
-		}
-	}, [user]);
+    useEffect(() => {
+        if (user) {
+            axios.get(`/api/user?userId=${user.id}`).then(response => {
+                setUserData(response.data);
+            });
+        }
+    }, [user]);
 
-	if (userData) {
+    if (userData) {
         if (userData.role != "caregiver") {
             router.push("/suite/patient/dashboard");
         }
-	}
+    }
 
     const patients = [
         { id: 1, name: "John Doe", age: 30, lastVisit: "2024-10-01" },
@@ -34,11 +37,21 @@ export default function Dashboard() {
         { id: 3, name: "Sam Johnson", age: 40, lastVisit: "2024-10-05" },
     ];
 
+
+    const appointments = [
+        { id: 1, patientId: 1, date: "2025-01-27T09:00:00", status: "Scheduled" },
+        { id: 2, patientId: 2, date: "2025-01-27T10:30:00", status: "Scheduled" },
+        { id: 3, patientId: 3, date: "2025-01-27T14:00:00", status: "Scheduled" },
+        { id: 4, patientId: 4, date: "2025-01-28T11:00:00", status: "Scheduled" },
+        { id: 5, patientId: 5, date: "2025-01-28T15:30:00", status: "Scheduled" },
+    ]
+
     return (
         <div className="container mx-auto">
             <h1 className="text-3xl font-semibold mb-6">Dashboard</h1>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="h-20 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 <PatientTable data={patients} />
+                <AppointmentList appointments={appointments} />
             </div>
         </div>
     )