Dental Care

app/(main)/admin/action.ts

@@ -0,0 +1,18 @@
+"use server";
+
+import { getServerSession } from "@/lib/auth-session/get-session";
+import { forbidden, unauthorized } from "next/navigation";
+import { setTimeout } from "node:timers/promises";
+
+export async function deleteApplication() {
+  const session = await getServerSession();
+  const user = session?.user;
+
+  if (!user) unauthorized();
+
+  if (user.role !== "admin") forbidden();
+
+  // Delete app...
+
+  await setTimeout(800);
+}

app/(main)/admin/appointment-management/page.tsx

@@ -0,0 +1,49 @@
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+import { AdminAppointmentsTable } from "@/components/admin/appointments-table";
+import { requireAdmin } from "@/lib/auth-session/auth-server";
+import { safeFindManyAppointments } from "@/lib/utils/appointment-helpers";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Appointment Management",
+};
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+export default async function AppointmentManagementPage() {
+  const { user } = await requireAdmin();
+
+  // Add pagination limit to prevent loading too much data at once
+  // Use safe find to filter out orphaned appointments
+  const appointments = await safeFindManyAppointments({
+    take: 100, // Limit to 100 most recent appointments
+    include: {
+      patient: true,
+      dentist: true,
+      service: true,
+      payment: true,
+    },
+    orderBy: {
+      date: "desc",
+    },
+  });
+
+  return (
+    <DashboardLayout
+      user={{ ...user, role: user.role || "admin" }}
+      role="admin"
+    >
+      <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">Appointment Management</h1>
+          <p className="text-muted-foreground">
+            Manage all appointments in the system
+          </p>
+        </div>
+
+        <AdminAppointmentsTable appointments={appointments} />
+      </div>
+    </DashboardLayout>
+  );
+}

app/(main)/admin/dentist-management/page.tsx

@@ -0,0 +1,62 @@
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+import { AdminDentistsTable } from "@/components/admin/dentists-table";
+import { requireAdmin } from "@/lib/auth-session/auth-server";
+import { prisma } from "@/lib/types/prisma";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Dentist Management",
+};
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+export default async function DentistManagementPage() {
+  const { user } = await requireAdmin();
+
+  const dentistsData = await prisma.user.findMany({
+    take: 50, // Limit to 50 dentists to prevent excessive data loading
+    where: {
+      role: "dentist",
+    },
+    include: {
+      appointmentsAsDentist: {
+        take: 10, // Limit appointments per dentist to avoid N+1 issue
+        include: {
+          service: true,
+          patient: true,
+        },
+        orderBy: {
+          date: "desc",
+        },
+      },
+    },
+    orderBy: {
+      createdAt: "desc",
+    },
+  });
+
+  // Transform the data to match the expected Dentist type
+  const dentists = dentistsData.map((dentist) => ({
+    ...dentist,
+    experience: dentist.experience !== null ? String(dentist.experience) : null,
+  }));
+
+  return (
+    <DashboardLayout
+      user={{ ...user, role: user.role || "admin" }}
+      role="admin"
+    >
+      <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">Dentist Management</h1>
+          <p className="text-muted-foreground">
+            Manage all dentists in the system
+          </p>
+        </div>
+
+        <AdminDentistsTable dentists={dentists} />
+      </div>
+    </DashboardLayout>
+  );
+}

app/(main)/admin/page.tsx

@@ -0,0 +1,197 @@
+import { ChartAreaInteractive } from "@/components/chart/chart-area-interactive";
+import { AdminAppointmentsTable } from "@/components/admin/appointments-table";
+import { SectionCards } from "@/components/layout/section-cards";
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+import type { Metadata } from "next";
+import { requireAdmin } from "@/lib/auth-session/auth-server";
+import { prisma } from "@/lib/types/prisma";
+import { safeFindManyAppointments } from "@/lib/utils/appointment-helpers";
+
+export const metadata: Metadata = {
+  title: "Dashboard",
+};
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+export default async function Page() {
+  // Require admin role - will redirect to home page (/) if not admin
+  const { user } = await requireAdmin();
+
+  // Calculate date ranges once for reuse
+  const now = new Date();
+  const DAY_IN_MS = 24 * 60 * 60 * 1000;
+  const thirtyDaysAgo = new Date(now.getTime() - 30 * DAY_IN_MS);
+  const sixtyDaysAgo = new Date(now.getTime() - 60 * DAY_IN_MS);
+  const ninetyDaysAgo = new Date(now.getTime() - 90 * DAY_IN_MS);
+
+  // Run all count queries in parallel for better performance
+  const [
+    totalAppointments,
+    previousAppointments,
+    newPatients,
+    previousPatients,
+    payments,
+    previousPayments,
+    completedAppointments,
+    previousCompleted,
+    appointmentsForChart,
+    appointments,
+  ] = await Promise.all([
+    // Total appointments in last 30 days
+    prisma.appointment.count({
+      where: {
+        createdAt: { gte: thirtyDaysAgo },
+      },
+    }),
+    // Previous period appointments for comparison
+    prisma.appointment.count({
+      where: {
+        createdAt: { gte: sixtyDaysAgo, lt: thirtyDaysAgo },
+      },
+    }),
+    // New patients in last 30 days
+    prisma.user.count({
+      where: {
+        role: "patient",
+        createdAt: { gte: thirtyDaysAgo },
+      },
+    }),
+    // Previous period patients
+    prisma.user.count({
+      where: {
+        role: "patient",
+        createdAt: { gte: sixtyDaysAgo, lt: thirtyDaysAgo },
+      },
+    }),
+    // Revenue this month
+    prisma.payment.aggregate({
+      where: {
+        status: "paid",
+        paidAt: { gte: thirtyDaysAgo },
+      },
+      _sum: {
+        amount: true,
+      },
+    }),
+    // Previous period revenue
+    prisma.payment.aggregate({
+      where: {
+        status: "paid",
+        paidAt: { gte: sixtyDaysAgo, lt: thirtyDaysAgo },
+      },
+      _sum: {
+        amount: true,
+      },
+    }),
+    // Calculate completed appointments for satisfaction (mock calculation)
+    prisma.appointment.count({
+      where: {
+        status: "completed",
+        updatedAt: { gte: thirtyDaysAgo },
+      },
+    }),
+    // Previous completed
+    prisma.appointment.count({
+      where: {
+        status: "completed",
+        updatedAt: { gte: sixtyDaysAgo, lt: thirtyDaysAgo },
+      },
+    }),
+    // Fetch appointments for chart (last 90 days)
+    prisma.appointment.findMany({
+      where: {
+        createdAt: { gte: ninetyDaysAgo },
+      },
+      select: {
+        createdAt: true,
+      },
+      orderBy: {
+        createdAt: "asc",
+      },
+    }),
+    // Fetch recent appointments for table
+    // Use safe find to filter out orphaned appointments
+    safeFindManyAppointments({
+      take: 20,
+      orderBy: {
+        createdAt: "desc",
+      },
+      include: {
+        patient: true,
+        dentist: true,
+        service: true,
+        payment: true,
+      },
+    }),
+  ]);
+
+  const revenue = payments._sum.amount || 0;
+  const previousRevenue = previousPayments._sum.amount || 0;
+
+  // Calculate percentage changes
+  const appointmentChange =
+    previousAppointments > 0
+      ? ((totalAppointments - previousAppointments) / previousAppointments) *
+        100
+      : 0;
+  const patientChange =
+    previousPatients > 0
+      ? ((newPatients - previousPatients) / previousPatients) * 100
+      : 0;
+  const revenueChange =
+    previousRevenue > 0
+      ? ((revenue - previousRevenue) / previousRevenue) * 100
+      : 0;
+  const satisfactionChange =
+    previousCompleted > 0
+      ? ((completedAppointments - previousCompleted) / previousCompleted) * 100
+      : 0;
+
+  // Mock satisfaction rate (in a real app, this would come from reviews/ratings)
+  const satisfactionRate = 98.5;
+
+  // Group appointments by date for chart
+  const chartData = appointmentsForChart.reduce(
+    (acc: Record<string, number>, appointment) => {
+      const date = appointment.createdAt.toISOString().split("T")[0];
+      acc[date] = (acc[date] || 0) + 1;
+      return acc;
+    },
+    {}
+  );
+
+  // Convert to array format for chart
+  const chartDataArray = Object.entries(chartData).map(([date, count]) => ({
+    date,
+    appointments: count,
+  }));
+
+  const dashboardStats = {
+    totalAppointments,
+    appointmentChange,
+    newPatients,
+    patientChange,
+    revenue,
+    revenueChange,
+    satisfactionRate,
+    satisfactionChange,
+  };
+
+  return (
+    <DashboardLayout
+      user={{ ...user, role: user.role || "admin" }}
+      role="admin"
+    >
+      <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+        <SectionCards stats={dashboardStats} />
+        <div className="px-4 lg:px-6">
+          <ChartAreaInteractive data={chartDataArray} />
+        </div>
+        <div className="px-4 lg:px-6">
+          <AdminAppointmentsTable appointments={appointments} />
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+}

app/(main)/admin/patient-management/page.tsx

@@ -0,0 +1,62 @@
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+import { AdminPatientsTable } from "@/components/admin/patients-table";
+import { requireAdmin } from "@/lib/auth-session/auth-server";
+import { prisma } from "@/lib/types/prisma";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Patient Management",
+};
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+export default async function PatientManagementPage() {
+  const { user } = await requireAdmin();
+
+  const patients = await prisma.user.findMany({
+    take: 50, // Limit to 50 patients to prevent excessive data loading
+    where: {
+      role: "patient",
+    },
+    include: {
+      appointmentsAsPatient: {
+        take: 10, // Limit appointments per patient to avoid N+1 issue
+        include: {
+          service: true,
+          dentist: true,
+        },
+        orderBy: {
+          date: "desc",
+        },
+      },
+      payments: {
+        take: 10, // Limit payments per patient
+        orderBy: {
+          createdAt: "desc",
+        },
+      },
+    },
+    orderBy: {
+      createdAt: "desc",
+    },
+  });
+
+  return (
+    <DashboardLayout
+      user={{ ...user, role: user.role || "admin" }}
+      role="admin"
+    >
+      <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">Patient Management</h1>
+          <p className="text-muted-foreground">
+            Manage all patients in the system
+          </p>
+        </div>
+
+        <AdminPatientsTable patients={patients} />
+      </div>
+    </DashboardLayout>
+  );
+}

app/(main)/admin/service-management/page.tsx

@@ -0,0 +1,53 @@
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+import { AdminServicesTable } from "@/components/admin/services-table";
+import { requireAdmin } from "@/lib/auth-session/auth-server";
+import { prisma } from "@/lib/types/prisma";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Service Management",
+};
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+export default async function ServiceManagementPage() {
+  const { user } = await requireAdmin();
+
+  const servicesData = await prisma.service.findMany({
+    take: 100, // Limit to 100 services
+    include: {
+      appointments: {
+        take: 5, // Limit appointments per service to avoid N+1 issue
+        orderBy: {
+          date: "desc",
+        },
+      },
+    },
+    orderBy: {
+      name: "asc",
+    },
+  });
+
+  // Transform the data to match the expected Service type
+  const services = servicesData.map((service) => ({
+    ...service,
+    description: service.description ?? "",
+  }));
+
+  return (
+    <DashboardLayout
+      user={{ ...user, role: user.role || "admin" }}
+      role="admin"
+    >
+      <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">Service Management</h1>
+          <p className="text-muted-foreground">Manage all dental services</p>
+        </div>
+
+        <AdminServicesTable services={services} />
+      </div>
+    </DashboardLayout>
+  );
+}

app/(main)/admin/settings/page.tsx

@@ -0,0 +1,19 @@
+import { requireAdmin } from "@/lib/auth-session/auth-server";
+import { AdminSettingsContent } from "@/components/admin/settings-content";
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+export default async function AdminSettingsPage() {
+  const { user } = await requireAdmin();
+
+  return (
+    <DashboardLayout
+      user={{ ...user, role: user.role || "admin" }}
+      role="admin"
+    >
+      <AdminSettingsContent user={{ ...user, role: user.role || "admin" }} />
+    </DashboardLayout>
+  );
+}

app/(main)/admin/user-management/page.tsx

@@ -0,0 +1,42 @@
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+import { AdminUsersTable } from "@/components/admin/users-table";
+import { requireAdmin } from "@/lib/auth-session/auth-server";
+import { prisma } from "@/lib/types/prisma";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "User Management",
+};
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+export default async function UserManagementPage() {
+  const { user } = await requireAdmin();
+
+  const usersRaw = await prisma.user.findMany({
+    take: 100, // Limit to 100 most recent users
+    orderBy: {
+      createdAt: "desc",
+    },
+  });
+  const users = usersRaw.map((u) => ({ ...u, role: u.role ?? undefined }));
+
+  return (
+    <DashboardLayout
+      user={{ ...user, role: user.role || "admin" }}
+      role="admin"
+    >
+      <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">User Management</h1>
+          <p className="text-muted-foreground">
+            Manage all users in the system
+          </p>
+        </div>
+
+        <AdminUsersTable users={users} />
+      </div>
+    </DashboardLayout>
+  );
+}

app/(main)/dentist/appointments/page.tsx

@@ -0,0 +1,57 @@
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+import { DentistAppointmentsList } from "@/components/dentist/appointments-list";
+import { requireDentist } from "@/lib/auth-session/auth-server";
+import { safeFindManyAppointments } from "@/lib/utils/appointment-helpers";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Appointments - Dentist",
+};
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+export default async function DentistAppointmentsPage() {
+  const { user } = await requireDentist();
+
+  const appointmentsData = await safeFindManyAppointments({
+    take: 100, // Limit to 100 most recent appointments
+    where: {
+      dentistId: user.id,
+    },
+    include: {
+      patient: true,
+      service: true,
+      payment: true,
+    },
+    orderBy: {
+      date: "desc",
+    },
+  });
+
+  const appointments = appointmentsData.map((appointment) => ({
+    ...appointment,
+    service: {
+      ...appointment.service,
+      price: parseFloat(appointment.service.price),
+    },
+  }));
+
+  return (
+    <DashboardLayout
+      user={{ ...user, role: user.role || "dentist" }}
+      role="dentist"
+    >
+      <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">Appointments</h1>
+          <p className="text-muted-foreground">
+            Manage your patient appointments
+          </p>
+        </div>
+
+        <DentistAppointmentsList appointments={appointments} />
+      </div>
+    </DashboardLayout>
+  );
+}

app/(main)/dentist/page.tsx

@@ -0,0 +1,294 @@
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Calendar, Clock, Users, CheckCircle } from "lucide-react";
+import Link from "next/link";
+import { requireDentist } from "@/lib/auth-session/auth-server";
+import { prisma } from "@/lib/types/prisma";
+import { safeFindManyAppointments } from "@/lib/utils/appointment-helpers";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Dentist Dashboard",
+};
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+export default async function DentistDashboard() {
+  // Require dentist role - will redirect to appropriate page if not dentist
+  const { user } = await requireDentist();
+
+  // Calculate date ranges
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const tomorrow = new Date(today);
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  const now = new Date();
+
+  // Run all queries in parallel for better performance
+  const [
+    todayAppointments,
+    pendingAppointments,
+    totalPatients,
+    completedAppointments,
+    upcomingAppointments,
+  ] = await Promise.all([
+    // Fetch today's appointments
+    safeFindManyAppointments({
+      where: {
+        dentistId: user.id,
+        date: {
+          gte: today,
+          lt: tomorrow,
+        },
+        status: {
+          in: ["pending", "confirmed"],
+        },
+      },
+      include: {
+        patient: true,
+        service: true,
+      },
+      orderBy: {
+        timeSlot: "asc",
+      },
+    }),
+    // Fetch pending appointments
+    safeFindManyAppointments({
+      where: {
+        dentistId: user.id,
+        status: "pending",
+        date: {
+          gte: now,
+        },
+      },
+      include: {
+        patient: true,
+        service: true,
+      },
+      orderBy: {
+        date: "asc",
+      },
+      take: 5,
+    }),
+    // Get total unique patients
+    prisma.appointment.groupBy({
+      by: ["patientId"],
+      where: {
+        dentistId: user.id,
+      },
+    }),
+    // Get completed appointments count
+    prisma.appointment.count({
+      where: {
+        dentistId: user.id,
+        status: "completed",
+      },
+    }),
+    // Get upcoming appointments count
+    prisma.appointment.count({
+      where: {
+        dentistId: user.id,
+        status: {
+          in: ["pending", "confirmed"],
+        },
+        date: {
+          gte: now,
+        },
+      },
+    }),
+  ]);
+
+  return (
+    <DashboardLayout
+      user={{ ...user, role: user.role || "dentist" }}
+      role="dentist"
+    >
+      <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">Welcome, Dr. {user.name}!</h1>
+          <p className="text-muted-foreground">
+            Manage your schedule and patients
+          </p>
+        </div>
+
+        {/* Statistics Cards */}
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">
+                Today&apos;s Appointments
+              </CardTitle>
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">
+                {todayAppointments.length}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Scheduled for today
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Upcoming</CardTitle>
+              <Clock className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{upcomingAppointments}</div>
+              <p className="text-xs text-muted-foreground">
+                Future appointments
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">
+                Total Patients
+              </CardTitle>
+              <Users className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{totalPatients.length}</div>
+              <p className="text-xs text-muted-foreground">Unique patients</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Completed</CardTitle>
+              <CheckCircle className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{completedAppointments}</div>
+              <p className="text-xs text-muted-foreground">All time</p>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Quick Actions */}
+        <div className="grid gap-4 md:grid-cols-3">
+          <Link href="/dentist/appointments">
+            <Button className="w-full h-20" variant="outline">
+              <div className="flex flex-col items-center gap-2">
+                <Calendar className="h-6 w-6" />
+                <span>View All Appointments</span>
+              </div>
+            </Button>
+          </Link>
+          <Link href="/dentist/schedule">
+            <Button className="w-full h-20" variant="outline">
+              <div className="flex flex-col items-center gap-2">
+                <Clock className="h-6 w-6" />
+                <span>Manage Schedule</span>
+              </div>
+            </Button>
+          </Link>
+          <Link href="/dentist/patients">
+            <Button className="w-full h-20" variant="outline">
+              <div className="flex flex-col items-center gap-2">
+                <Users className="h-6 w-6" />
+                <span>Patient Records</span>
+              </div>
+            </Button>
+          </Link>
+        </div>
+
+        {/* Today's Schedule */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Today&apos;s Schedule</CardTitle>
+            <CardDescription>{today.toLocaleDateString()}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {todayAppointments.length === 0 ? (
+              <p className="text-muted-foreground text-center py-8">
+                No appointments scheduled for today
+              </p>
+            ) : (
+              <div className="space-y-4">
+                {todayAppointments.map((appointment) => (
+                  <div
+                    key={appointment.id}
+                    className="flex items-center justify-between border-b pb-4 last:border-0"
+                  >
+                    <div>
+                      <p className="font-medium">{appointment.patient.name}</p>
+                      <p className="text-sm text-muted-foreground">
+                        {appointment.service.name}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {appointment.timeSlot}
+                      </p>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button size="sm" variant="outline">
+                        View Details
+                      </Button>
+                      {appointment.status === "pending" && (
+                        <Button size="sm">Confirm</Button>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Pending Appointments */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Pending Appointments</CardTitle>
+            <CardDescription>
+              Appointments awaiting confirmation
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {pendingAppointments.length === 0 ? (
+              <p className="text-muted-foreground text-center py-8">
+                No pending appointments
+              </p>
+            ) : (
+              <div className="space-y-4">
+                {pendingAppointments.map((appointment) => (
+                  <div
+                    key={appointment.id}
+                    className="flex items-center justify-between border-b pb-4 last:border-0"
+                  >
+                    <div>
+                      <p className="font-medium">{appointment.patient.name}</p>
+                      <p className="text-sm text-muted-foreground">
+                        {appointment.service.name}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {new Date(appointment.date).toLocaleDateString()} at{" "}
+                        {appointment.timeSlot}
+                      </p>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button size="sm">Accept</Button>
+                      <Button size="sm" variant="destructive">
+                        Decline
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </DashboardLayout>
+  );
+}

app/(main)/dentist/patients/page.tsx

@@ -0,0 +1,64 @@
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+import { DentistPatientsTable } from "@/components/dentist/patients-table";
+import { requireDentist } from "@/lib/auth-session/auth-server";
+import { safeFindManyAppointments } from "@/lib/utils/appointment-helpers";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Patient Records",
+};
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+export default async function DentistPatientsPage() {
+  const { user } = await requireDentist();
+
+  // Get all unique patients who have appointments with this dentist
+  // Use safe find to filter out orphaned appointments
+  const appointments = await safeFindManyAppointments({
+    take: 200, // Limit to prevent excessive data loading
+    where: {
+      dentistId: user.id,
+    },
+    include: {
+      patient: true,
+      service: true,
+    },
+    orderBy: {
+      date: "desc",
+    },
+  });
+
+  // Group by patient
+  const patientsMap = new Map();
+  appointments.forEach((apt) => {
+    if (!patientsMap.has(apt.patient.id)) {
+      patientsMap.set(apt.patient.id, {
+        ...apt.patient,
+        appointments: [],
+      });
+    }
+    patientsMap.get(apt.patient.id).appointments.push(apt);
+  });
+
+  const patients = Array.from(patientsMap.values());
+
+  return (
+    <DashboardLayout
+      user={{ ...user, role: user.role || "dentist" }}
+      role="dentist"
+    >
+      <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">Patient Records</h1>
+          <p className="text-muted-foreground">
+            View your patients&apos; information and history
+          </p>
+        </div>
+
+        <DentistPatientsTable patients={patients} />
+      </div>
+    </DashboardLayout>
+  );
+}

app/(main)/dentist/schedule/page.tsx

@@ -0,0 +1,49 @@
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { requireDentist } from "@/lib/auth-session/auth-server";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Manage Schedule",
+};
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+export default async function DentistSchedulePage() {
+  const { user } = await requireDentist();
+
+  return (
+    <DashboardLayout
+      user={{ ...user, role: user.role || "dentist" }}
+      role="dentist"
+    >
+      <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">Manage Schedule</h1>
+          <p className="text-muted-foreground">
+            Set your working hours and availability
+          </p>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Working Hours</CardTitle>
+            <CardDescription>Configure your weekly schedule</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-muted-foreground text-center py-8">
+              Schedule management feature coming soon
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </DashboardLayout>
+  );
+}

app/(main)/dentist/settings/page.tsx

@@ -0,0 +1,44 @@
+import { requireAuth } from "@/lib/auth-session/auth-server";
+import { redirect } from "next/navigation";
+import { UserSettingsContent } from "@/components/user/settings-content";
+import { prisma } from "@/lib/types/prisma";
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+export default async function DentistSettingsPage() {
+  const session = await requireAuth();
+
+  if (session.user.role !== "dentist") {
+    redirect("/forbidden");
+  }
+
+  // Fetch full user data
+  const user = await prisma.user.findUnique({
+    where: { id: session.user.id },
+    select: {
+      id: true,
+      name: true,
+      email: true,
+      phone: true,
+      image: true,
+      dateOfBirth: true,
+      address: true,
+      role: true,
+    },
+  });
+
+  if (!user) {
+    redirect("/sign-in");
+  }
+
+  return (
+    <DashboardLayout
+      user={{ ...user, role: user.role || "dentist" }}
+      role="dentist"
+    >
+      <UserSettingsContent user={{ ...user, role: user.role || "dentist" }} />
+    </DashboardLayout>
+  );
+}

app/(main)/patient/appointments/page.tsx

@@ -0,0 +1,78 @@
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+import { AppointmentsList } from "@/components/patient/appointments-list";
+import { requirePatient } from "@/lib/auth-session/auth-server";
+import { safeFindManyAppointments } from "@/lib/utils/appointment-helpers";
+import type { Metadata } from "next";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { CheckCircle } from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "My Appointments",
+};
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+interface AppointmentsPageProps {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}
+
+export default async function AppointmentsPage({
+  searchParams,
+}: AppointmentsPageProps) {
+  const { user } = await requirePatient();
+
+  const appointmentsData = await safeFindManyAppointments({
+    take: 50, // Limit to 50 most recent appointments
+    where: {
+      patientId: user.id,
+    },
+    include: {
+      dentist: true,
+      service: true,
+      payment: true,
+    },
+    orderBy: {
+      date: "desc",
+    },
+  });
+
+  const appointments = appointmentsData.map((appointment) => ({
+    ...appointment,
+    service: {
+      ...appointment.service,
+      price: appointment.service.price, // Keep price as is (can be string or number)
+    },
+  }));
+
+  const params = await searchParams;
+  const showSuccess = params.success === "true";
+
+  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">My Appointments</h1>
+          <p className="text-muted-foreground">
+            View and manage your dental appointments
+          </p>
+        </div>
+
+        {showSuccess && (
+          <Alert className="border-green-200 bg-green-50 dark:bg-green-950/30">
+            <CheckCircle className="h-4 w-4 text-green-600" />
+            <AlertDescription className="text-green-800 dark:text-green-200">
+              Your appointment has been successfully booked! Check your email
+              for confirmation.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        <AppointmentsList appointments={appointments} />
+      </div>
+    </DashboardLayout>
+  );
+}

app/(main)/patient/book-appointment/page.tsx

@@ -0,0 +1,93 @@
+import type React from "react";
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+import BookingForm from "@/components/patient/booking-form";
+import { requirePatient } from "@/lib/auth-session/auth-server";
+import { prisma } from "@/lib/types/prisma";
+import type { Metadata } from "next";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { XCircle } from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "Book Appointment",
+};
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+interface BookAppointmentPageProps {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}
+
+export default async function BookAppointmentPage({
+  searchParams,
+}: BookAppointmentPageProps) {
+  const { user } = await requirePatient();
+
+  // Fetch available services from database
+  const servicesFromDb = await prisma.service.findMany({
+    where: {
+      isActive: true,
+    },
+    orderBy: {
+      name: "asc",
+    },
+  });
+
+  // Transform services to match component expectations
+  const services = servicesFromDb.map((service) => ({
+    id: service.id,
+    name: service.name,
+    price: service.price,
+    duration: service.duration,
+    category: service.category,
+    description: service.description || undefined,
+  }));
+
+  // Fetch available dentists
+  const dentists = await prisma.user.findMany({
+    where: {
+      role: "dentist",
+      isAvailable: true,
+    },
+    select: {
+      id: true,
+      name: true,
+      specialization: true,
+      image: true,
+    },
+    orderBy: {
+      name: "asc",
+    },
+  });
+
+  // Transform dentists data to match component expectations
+  const transformedDentists = dentists.map((dentist) => ({
+    ...dentist,
+    specialization: dentist.specialization || undefined,
+    image: dentist.image || undefined,
+  }));
+
+  const params = await searchParams;
+  const showCanceled = params.canceled === "true";
+
+  return (
+    <DashboardLayout
+      user={{ ...user, role: user.role || "patient" }}
+      role="patient"
+    >
+      {showCanceled && (
+        <Alert className="m-4 md:m-8 border-red-200 bg-red-50 dark:bg-red-950/30">
+          <XCircle className="h-4 w-4 text-red-600" />
+          <AlertDescription className="text-red-800 dark:text-red-200">
+            Payment was canceled. You can try booking again.
+          </AlertDescription>
+        </Alert>
+      )}
+      <BookingForm
+        services={services}
+        dentists={transformedDentists}
+        patientId={user.id}
+      />
+    </DashboardLayout>
+  );
+}

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>
+  );
+}

app/(main)/patient/page.tsx

@@ -0,0 +1,92 @@
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+import { PatientSectionCards } from "@/components/patient/section-cards";
+import { requirePatient } from "@/lib/auth-session/auth-server";
+import { prisma } from "@/lib/types/prisma";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Patient Dashboard",
+};
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+export default async function PatientDashboard() {
+  // Require patient role - will redirect to appropriate page if not patient
+  const { user } = await requirePatient();
+
+  const now = new Date();
+
+  // Run all queries in parallel for better performance
+  const [
+    upcomingAppointmentsCount,
+    completedAppointmentsCount,
+    totalSpentResult,
+    pendingPaymentsResult,
+  ] = await Promise.all([
+    // Fetch upcoming appointments count
+    prisma.appointment.count({
+      where: {
+        patientId: user.id,
+        date: {
+          gte: now,
+        },
+        status: {
+          in: ["pending", "confirmed"],
+        },
+      },
+    }),
+    // Fetch completed appointments count
+    prisma.appointment.count({
+      where: {
+        patientId: user.id,
+        status: "completed",
+      },
+    }),
+    // Calculate total spent (paid payments)
+    prisma.payment.aggregate({
+      where: {
+        userId: user.id,
+        status: "paid",
+      },
+      _sum: {
+        amount: true,
+      },
+    }),
+    // Calculate pending payments
+    prisma.payment.aggregate({
+      where: {
+        userId: user.id,
+        status: "pending",
+      },
+      _sum: {
+        amount: true,
+      },
+    }),
+  ]);
+
+  const patientStats = {
+    upcomingAppointments: upcomingAppointmentsCount,
+    completedAppointments: completedAppointmentsCount,
+    totalSpent: totalSpentResult._sum.amount || 0,
+    pendingPayments: pendingPaymentsResult._sum.amount || 0,
+  };
+
+  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">
+        <div className="px-4 lg:px-6">
+          <h1 className="text-3xl font-bold">Welcome back, {user.name}!</h1>
+          <p className="text-muted-foreground">
+            Manage your appointments and health records
+          </p>
+        </div>
+
+        <PatientSectionCards stats={patientStats} />
+      </div>
+    </DashboardLayout>
+  );
+}

app/(main)/patient/payments/page.tsx

@@ -0,0 +1,52 @@
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+import { PaymentHistory } from "@/components/patient/payment-history";
+import { requirePatient } from "@/lib/auth-session/auth-server";
+import { prisma } from "@/lib/types/prisma";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Payment History",
+};
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+export default async function PaymentsPage() {
+  const { user } = await requirePatient();
+
+  const payments = await prisma.payment.findMany({
+    take: 50, // Limit to 50 most recent payments
+    where: {
+      userId: user.id,
+    },
+    include: {
+      appointment: {
+        include: {
+          service: true,
+          dentist: true,
+        },
+      },
+    },
+    orderBy: {
+      createdAt: "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">Payment History</h1>
+          <p className="text-muted-foreground">
+            View your payment transactions
+          </p>
+        </div>
+
+        <PaymentHistory payments={payments} />
+      </div>
+    </DashboardLayout>
+  );
+}

app/(main)/patient/settings/page.tsx

@@ -0,0 +1,44 @@
+import { requireAuth } from "@/lib/auth-session/auth-server";
+import { redirect } from "next/navigation";
+import { UserSettingsContent } from "@/components/user/settings-content";
+import { prisma } from "@/lib/types/prisma";
+import { DashboardLayout } from "@/components/layout/dashboard-layout";
+
+// Force dynamic rendering since this page uses authentication (headers)
+export const dynamic = "force-dynamic";
+
+export default async function UserSettingsPage() {
+  const session = await requireAuth();
+
+  if (session.user.role !== "patient") {
+    redirect("/");
+  }
+
+  // Fetch full user data
+  const user = await prisma.user.findUnique({
+    where: { id: session.user.id },
+    select: {
+      id: true,
+      name: true,
+      email: true,
+      phone: true,
+      image: true,
+      dateOfBirth: true,
+      address: true,
+      role: true,
+    },
+  });
+
+  if (!user) {
+    redirect("/sign-in");
+  }
+
+  return (
+    <DashboardLayout
+      user={{ ...user, role: user.role || "patient" }}
+      role="patient"
+    >
+      <UserSettingsContent user={{ ...user, role: user.role || "patient" }} />
+    </DashboardLayout>
+  );
+}

app/(main)/profile/page.tsx

@@ -0,0 +1,9 @@
+import {Metadata} from "next"
+
+export const metadata: Metadata = {
+  title: "Profile",
+};
+
+export default function Profile (){
+    return
+}