Dental Care

app/(main)/patient/health-records/page.tsx

@@ -0,0 +1,176 @@
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { requirePatient } from "@/lib/auth-session/auth-server";
+import { prisma } from "@/lib/types/prisma";
+import type { Metadata } from "next";
+import { FileText, Calendar, User } from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "Health Records",
+};
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+export default async function HealthRecordsPage() {
+  const { user } = await requirePatient();
+
+  const userDetails = await prisma.user.findUnique({
+    where: { id: user.id },
+    include: {
+      appointmentsAsPatient: {
+        where: {
+          status: "completed",
+        },
+        include: {
+          service: true,
+          dentist: true,
+        },
+        orderBy: {
+          date: "desc",
+        },
+      },
+    },
+  });
+
+  return (
+    <DashboardLayout
+      user={{ ...user, role: user.role || "patient" }}
+      role="patient"
+    >
+      <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6 px-4 lg:px-6">
+        <div>
+          <h1 className="text-3xl font-bold">Health Records</h1>
+          <p className="text-muted-foreground">
+            Your medical history and treatment records
+          </p>
+        </div>
+
+        {/* Personal Information */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <User className="h-5 w-5" />
+              Personal Information
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="grid gap-4 md:grid-cols-2">
+            <div>
+              <p className="text-sm font-medium text-muted-foreground">
+                Full Name
+              </p>
+              <p className="text-base">{userDetails?.name}</p>
+            </div>
+            <div>
+              <p className="text-sm font-medium text-muted-foreground">Email</p>
+              <p className="text-base">{userDetails?.email}</p>
+            </div>
+            <div>
+              <p className="text-sm font-medium text-muted-foreground">Phone</p>
+              <p className="text-base">
+                {userDetails?.phone || "Not provided"}
+              </p>
+            </div>
+            <div>
+              <p className="text-sm font-medium text-muted-foreground">
+                Date of Birth
+              </p>
+              <p className="text-base">
+                {userDetails?.dateOfBirth
+                  ? new Date(userDetails.dateOfBirth).toLocaleDateString()
+                  : "Not provided"}
+              </p>
+            </div>
+            <div className="md:col-span-2">
+              <p className="text-sm font-medium text-muted-foreground">
+                Address
+              </p>
+              <p className="text-base">
+                {userDetails?.address || "Not provided"}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Medical History */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <FileText className="h-5 w-5" />
+              Medical History
+            </CardTitle>
+            <CardDescription>
+              Important medical information for your dentist
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {userDetails?.medicalHistory ? (
+              <p className="text-base whitespace-pre-wrap">
+                {userDetails.medicalHistory}
+              </p>
+            ) : (
+              <p className="text-muted-foreground">
+                No medical history recorded
+              </p>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Treatment History */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Calendar className="h-5 w-5" />
+              Treatment History
+            </CardTitle>
+            <CardDescription>Completed dental procedures</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {!userDetails?.appointmentsAsPatient ||
+            userDetails.appointmentsAsPatient.length === 0 ? (
+              <p className="text-muted-foreground text-center py-8">
+                No treatment history
+              </p>
+            ) : (
+              <div className="space-y-4">
+                {userDetails.appointmentsAsPatient.map((appointment) => (
+                  <div
+                    key={appointment.id}
+                    className="border-b pb-4 last:border-0"
+                  >
+                    <div className="flex items-start justify-between">
+                      <div>
+                        <p className="font-medium">
+                          {appointment.service.name}
+                        </p>
+                        <p className="text-sm text-muted-foreground">
+                          Dr. {appointment.dentist.name}
+                        </p>
+                        <p className="text-sm text-muted-foreground">
+                          {new Date(appointment.date).toLocaleDateString()} at{" "}
+                          {appointment.timeSlot}
+                        </p>
+                        {appointment.notes && (
+                          <p className="text-sm mt-2">
+                            <span className="font-medium">Notes:</span>{" "}
+                            {appointment.notes}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </DashboardLayout>
+  );
+}