Doctor Dash Stuff

package.json

@@ -25,6 +25,7 @@
     "axios": "^1.7.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "hoyahax-2025": "file:",
     "https-localhost": "^4.7.1",
     "lucide-react": "^0.474.0",
@@ -34,6 +35,7 @@
     "next-themes": "^0.4.4",
     "openai-whisper": "^1.0.2",
     "react": "^19.0.0",
+    "react-day-picker": "8.10.1",
     "react-dom": "^19.0.0",
     "recharts": "^2.15.0",
     "svix": "^1.45.1",

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) => (
+                <PatientTable data={patients} />
-                    <div key={i} className="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6">
+                <ScheduleCalender />
-                        <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>
-                ))}
             </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}>

src/components/ui/calendar.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
+        ),
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }