Yippe 1

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

@@ -0,0 +1,75 @@
+"use client"
+
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card"
+import {
+    ChartConfig,
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+} from "@/components/ui/chart"
+
+const chartData = {
+    months: [ "Jan", "Feb", "Mar", "Apr" ],
+    data: [ 2, 2, 5, 6, 9, 9],
+}
+
+const chartConfig = {
+    desktop: {
+        label: "paint index",
+        color: "hsl(var(--chart-1))",
+    },
+} satisfies ChartConfig
+
+export function IntenseChart() {
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Intensity of Symtoms</CardTitle>
+                <CardDescription> Last 3 months</CardDescription>
+            </CardHeader>
+            <CardContent>
+                <ChartContainer config={chartConfig}>
+                    <LineChart
+                        accessibilityLayer
+                        data={chartData.months.map((month, index) => ({
+                            month,
+                            desktop: chartData.data[index],
+                        }))}
+                        margin={{
+                            left: 12,
+                            right: 12,
+                        }}
+                    >
+                        <CartesianGrid vertical={false} />
+                        <XAxis
+                            dataKey="month"
+                            tickLine={false}
+                            axisLine={false}
+                            tickMargin={8}
+                            tickFormatter={(value) => value.slice(0, 3)}
+                        />
+                        <ChartTooltip
+                            cursor={false}
+                            content={<ChartTooltipContent hideLabel />}
+                        />
+                        <Line
+                            dataKey="desktop"
+                            type="natural"
+                            stroke="var(--color-desktop)"
+                            strokeWidth={2}
+                            dot={false}
+                        />
+                    </LineChart>
+                </ChartContainer>
+            </CardContent>
+        </Card>
+    )
+}

src/app/(panels)/suite/patient/dashboard/MedicationTable.jsx

@@ -0,0 +1,48 @@
+"use client"
+
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+} from "@tanstack/react-table"
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+
+export function MedicationTable(medications) {
+
+
+	if (!userData) return <div>Loading...</div>;
+
+	console.log(userData);
+    
+    return (
+        <div className="rounded-md border">
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>Medication</TableHead>
+                        <TableHead>Dosage</TableHead>
+                        <TableHead>Frequency</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {medications.map((medication) => (
+                        <TableRow key={medication.id}>
+                            <TableCell>{medication.name}</TableCell>
+                            <TableCell>{medication.dosage}</TableCell>
+                            <TableCell>{medication.frequency}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    )
+}

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

@@ -0,0 +1,32 @@
+"use client"
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useUser } from '@clerk/nextjs';
+
+import { IntenseChart } from "./IntensityChart"
+import { MedicationTable } from "./MedicationTable"
+
+export default function Dashboard() {
+
+    const { user } = useUser();
+	const [userData, setUserData] = useState(null);
+
+	useEffect(() => {
+		if (user) {
+			axios.get(`/api/user?userId=${user.id}`).then(response => {
+				setUserData(response.data);
+			});
+		}
+	}, [user]);   
+
+    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">
+                <IntenseChart />
+                <MedicationTable medications={[]} />
+            </div>
+        </div>
+    )
+}
+

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

@@ -1,18 +0,0 @@
-"use client"
-
-export default function Dashboard() {
-    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>
-                ))}
-            </div>
-        </div>
-    )
-}
-