Doctor Dash Stuff

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

@@ -0,0 +1,24 @@
+"use client"
+import { useState } from "react"
+
+import { Calendar } from "@/components/ui/calendar"
+
+import { Card, CardContent } from "@/components/ui/card"
+
+export function ScheduleCalender() {
+
+    const [date, setDate] = useState(new Date())
+
+    return (
+        <Card>
+            <CardContent className="px-auto py-5">
+                <Calendar
+                    mode="single"
+                    selected={date}
+                    onSelect={setDate}
+                    className="rounded-md my-auto mx-auto w-fit"
+                />
+            </CardContent>
+        </Card>
+    )
+}

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

@@ -0,0 +1,40 @@
+"use client"
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+
+import { Card, CardContent } from "@/components/ui/card"
+
+export function PatientTable({ data }) {
+
+    return (
+        <Card className="rounded-md border">
+            <CardContent>
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>Name</TableHead>
+                        <TableHead>Age</TableHead>
+                        <TableHead>Last Visit</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {data.map((patients) => (
+                        <TableRow key={patients.id}>
+                            <TableCell>{patients.name}</TableCell>
+                            <TableCell>{patients.age}</TableCell>
+                            <TableCell>{new Date(patients.lastVisit).toLocaleDateString()}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+            </CardContent>
+        </Card>
+    )
+}

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

@@ -1,16 +1,23 @@
 "use client"
 
+import { PatientTable } from "./PatientTable"
+
+import { ScheduleCalender } from "./Calender"
+
 export default function Dashboard() {
+
+    const patients = [
+        { id: 1, name: "John Doe", age: 30, lastVisit: "2024-10-01" },
+        { id: 2, name: "Jane Smith", age: 25, lastVisit: "2024-09-15" },
+        { id: 3, name: "Sam Johnson", age: 40, lastVisit: "2024-10-05" },
+    ];
+
     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">
-                {[...Array(6)].map((_, i) => (
-                    <div key={i} className="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6">
-                        <h2 className="text-xl font-semibold mb-4">Card {i + 1}</h2>
-                        <p className="">This is some placeholder content for Card {i + 1}.</p>
-                    </div>
-                ))}
+                <PatientTable data={patients} />
+                <ScheduleCalender />
             </div>
         </div>
     )

src/app/(panels)/suite/patient/dashboard/IntensityChart.tsx

@@ -33,7 +33,7 @@ export function IntenseChart() {
         <Card>
             <CardHeader>
                 <CardTitle>Intensity of Symtoms</CardTitle>
-                <CardDescription> Last 3 months</CardDescription>
+                <CardDescription> Last 4 months</CardDescription>
             </CardHeader>
             <CardContent>
                 <ChartContainer config={chartConfig}>