Task2 completed.

app/admin/dashboard/page.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+
+type AdminAppointment = {
+  id: string;
+  status: "active" | "done" | "cancelled";
+  created_at: string;
+  patients: { name: string };
+  doctors: { name: string; specialty: string };
+  slots: { start_time: string; end_time: string };
+};
+
+function formatDateTime(iso: string) {
+  return new Date(iso).toLocaleString("en-IN", {
+    dateStyle: "medium",
+    timeStyle: "short",
+  });
+}
+
+export default function AdminDashboard() {
+  const router = useRouter();
+  const [appointments, setAppointments] = useState<AdminAppointment[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function load() {
+      const res = await fetch("/api/admin/appointments");
+      if (!res.ok) {
+        router.push("/admin/login");
+        return;
+      }
+      const data = await res.json();
+      setAppointments(data.appointments);
+      setLoading(false);
+    }
+
+    load();
+  }, [router]);
+
+  async function handleLogout() {
+    await fetch("/api/admin/logout", { method: "POST" });
+    router.push("/admin/login");
+  }
+
+  if (loading) {
+    return (
+      <main className="flex min-h-screen items-center justify-center">
+        <p className="text-gray-500">Loading...</p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen bg-gray-50 p-6">
+      <div className="mx-auto max-w-5xl">
+        <div className="mb-6 flex items-center justify-between">
+          <h1 className="text-2xl font-bold">Admin Dashboard</h1>
+          <button
+            onClick={handleLogout}
+            className="rounded-lg border px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"
+          >
+            Logout
+          </button>
+        </div>
+
+        <section>
+          <h2 className="mb-3 text-lg font-semibold">All Appointments</h2>
+          {appointments.length === 0 ? (
+            <p className="text-sm text-gray-500">No appointments found.</p>
+          ) : (
+            <div className="overflow-hidden rounded-xl border bg-white">
+              <table className="w-full text-sm">
+                <thead className="bg-gray-50 text-left text-gray-600">
+                  <tr>
+                    <th className="px-4 py-3 font-medium">Patient</th>
+                    <th className="px-4 py-3 font-medium">Doctor</th>
+                    <th className="px-4 py-3 font-medium">Specialty</th>
+                    <th className="px-4 py-3 font-medium">Slot</th>
+                    <th className="px-4 py-3 font-medium">Status</th>
+                    <th className="px-4 py-3 font-medium">Created</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y">
+                  {appointments.map((appt) => (
+                    <tr key={appt.id}>
+                      <td className="px-4 py-3">{appt.patients?.name}</td>
+                      <td className="px-4 py-3">{appt.doctors?.name}</td>
+                      <td className="px-4 py-3 text-gray-500">
+                        {appt.doctors?.specialty}
+                      </td>
+                      <td className="px-4 py-3">
+                        {formatDateTime(appt.slots?.start_time)}
+                      </td>
+                      <td className="px-4 py-3">
+                        <span
+                          className={`rounded-full px-2 py-0.5 text-xs font-medium ${
+                            appt.status === "active"
+                              ? "bg-blue-100 text-blue-700"
+                              : appt.status === "done"
+                              ? "bg-green-100 text-green-700"
+                              : "bg-gray-100 text-gray-600"
+                          }`}
+                        >
+                          {appt.status}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3 text-gray-500">
+                        {formatDateTime(appt.created_at)}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </section>
+      </div>
+    </main>
+  );
+}

app/admin/login/page.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+export default function AdminLogin() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    const res = await fetch("/api/admin/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, password }),
+    });
+
+    if (res.ok) {
+      router.push("/admin/dashboard");
+    } else {
+      const data = await res.json();
+      setError(data.error ?? "Login failed.");
+      setLoading(false);
+    }
+  }
+
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-gray-50">
+      <div className="w-full max-w-md rounded-xl border bg-white p-8 shadow-sm">
+        <h1 className="mb-6 text-2xl font-bold">Admin Login</h1>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">
+              Email
+            </label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              placeholder="admin@test.com"
+              className="w-full rounded-lg border px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">
+              Password
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="w-full rounded-lg border px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"
+            />
+          </div>
+          {error && <p className="text-sm text-red-600">{error}</p>}
+          <button
+            type="submit"
+            disabled={loading}
+            className="rounded-lg bg-purple-600 py-2 font-medium text-white hover:bg-purple-700 disabled:opacity-50"
+          >
+            {loading ? "Logging in..." : "Login"}
+          </button>
+        </form>
+        <p className="mt-4 text-center text-sm text-gray-500">
+          <Link href="/" className="text-purple-600 hover:underline">
+            ← Back to home
+          </Link>
+        </p>
+      </div>
+    </main>
+  );
+}

app/api/admin/appointments/route.ts

@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from "next/server";
+import { supabaseAdmin } from "@/lib/supabase-server";
+
+export async function GET(req: NextRequest) {
+  const adminId = req.cookies.get("admin_session")?.value;
+  if (!adminId) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const { data: admin } = await supabaseAdmin
+    .from("system_admins")
+    .select("id")
+    .eq("id", adminId)
+    .single();
+  if (!admin) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const { data: appointments } = await supabaseAdmin
+    .from("appointments")
+    .select("id, status, created_at, patients(name), doctors(name, specialty), slots(start_time, end_time)")
+    .order("created_at", { ascending: false });
+
+  return NextResponse.json({ appointments: appointments ?? [] });
+}

app/api/admin/login/route.ts

@@ -0,0 +1,25 @@
+import { NextRequest, NextResponse } from "next/server";
+import { supabaseAdmin } from "@/lib/supabase-server";
+
+export async function POST(req: NextRequest) {
+  const { email, password } = await req.json();
+  if (!email || !password)
+    return NextResponse.json({ error: "Email and password are required" }, { status: 400 });
+
+  const { data: admin } = await supabaseAdmin
+    .from("system_admins")
+    .select("id, email")
+    .eq("email", email)
+    .eq("password", password)
+    .single();
+  if (!admin) return NextResponse.json({ error: "Invalid credentials" }, { status: 401 });
+
+  const res = NextResponse.json({ success: true });
+  res.cookies.set("admin_session", admin.id, {
+    httpOnly: true,
+    sameSite: "lax",
+    path: "/",
+    maxAge: 60 * 60 * 8,
+  });
+  return res;
+}

app/api/admin/logout/route.ts

@@ -0,0 +1,7 @@
+import { NextResponse } from "next/server";
+
+export async function POST() {
+  const res = NextResponse.json({ success: true });
+  res.cookies.delete("admin_session");
+  return res;
+}

app/api/appointments/book/route.ts

@@ -1,5 +1,57 @@
 import { NextRequest, NextResponse } from "next/server";
+import { supabaseAdmin } from "@/lib/supabase-server";
+import { validateSlotAvailable, validateNoActiveAppointmentWithDoctor } from "@/lib/appointments";
 
-export async function POST(_req: NextRequest) {
-  return NextResponse.json({ error: "Not implemented" }, { status: 501 });
+export async function POST(req: NextRequest) {
+  const token = req.headers.get("authorization")?.replace("Bearer ", "");
+  if (!token) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const {
+    data: { user },
+    error: authError,
+  } = await supabaseAdmin.auth.getUser(token);
+  if (authError || !user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const { data: patient } = await supabaseAdmin
+    .from("patients")
+    .select("id")
+    .eq("id", user.id)
+    .single();
+  if (!patient) return NextResponse.json({ error: "Only patients can book appointments" }, { status: 403 });
+
+  const { slotId, doctorId } = await req.json();
+  if (!slotId || !doctorId)
+    return NextResponse.json({ error: "slotId and doctorId are required" }, { status: 400 });
+
+  const { data: slot } = await supabaseAdmin
+    .from("slots")
+    .select("id, is_booked")
+    .eq("id", slotId)
+    .single();
+  if (!slot) return NextResponse.json({ error: "Slot not found" }, { status: 404 });
+
+  const slotError = validateSlotAvailable(slot.is_booked);
+  if (slotError) return NextResponse.json({ error: slotError }, { status: 409 });
+
+  const { data: existing } = await supabaseAdmin
+    .from("appointments")
+    .select("id")
+    .eq("patient_id", user.id)
+    .eq("doctor_id", doctorId)
+    .eq("status", "active")
+    .maybeSingle();
+
+  const duplicateError = validateNoActiveAppointmentWithDoctor(!!existing);
+  if (duplicateError) return NextResponse.json({ error: duplicateError }, { status: 409 });
+
+  const { data: appointment, error: insertError } = await supabaseAdmin
+    .from("appointments")
+    .insert({ patient_id: user.id, doctor_id: doctorId, slot_id: slotId })
+    .select()
+    .single();
+  if (insertError) return NextResponse.json({ error: insertError.message }, { status: 500 });
+
+  await supabaseAdmin.from("slots").update({ is_booked: true }).eq("id", slotId);
+
+  return NextResponse.json({ appointment });
 }

app/api/appointments/cancel/route.ts

@@ -1,5 +1,54 @@
 import { NextRequest, NextResponse } from "next/server";
+import { supabaseAdmin } from "@/lib/supabase-server";
+import {
+  validateAppointmentActive,
+  validatePatientCancelTime,
+  AppointmentStatus,
+} from "@/lib/appointments";
 
-export async function POST(_req: NextRequest) {
-  return NextResponse.json({ error: "Not implemented" }, { status: 501 });
+export async function POST(req: NextRequest) {
+  const token = req.headers.get("authorization")?.replace("Bearer ", "");
+  if (!token) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const {
+    data: { user },
+    error: authError,
+  } = await supabaseAdmin.auth.getUser(token);
+  if (authError || !user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const { appointmentId, action } = await req.json();
+  if (!appointmentId || !action)
+    return NextResponse.json({ error: "appointmentId and action are required" }, { status: 400 });
+  if (!["cancel", "done"].includes(action))
+    return NextResponse.json({ error: "action must be cancel or done" }, { status: 400 });
+
+  const { data: appointment } = await supabaseAdmin
+    .from("appointments")
+    .select("id, status, patient_id, doctor_id, slot_id, slots(start_time)")
+    .eq("id", appointmentId)
+    .single();
+  if (!appointment) return NextResponse.json({ error: "Appointment not found" }, { status: 404 });
+
+  const isDoctor = appointment.doctor_id === user.id;
+  const isPatient = appointment.patient_id === user.id;
+  if (!isDoctor && !isPatient) return NextResponse.json({ error: "Unauthorized" }, { status: 403 });
+
+  if (action === "done" && !isDoctor)
+    return NextResponse.json({ error: "Only doctors can mark appointments as done" }, { status: 403 });
+
+  const activeError = validateAppointmentActive(appointment.status as AppointmentStatus);
+  if (activeError) return NextResponse.json({ error: activeError }, { status: 409 });
+
+  const startTime = (appointment.slots as { start_time: string }).start_time;
+  const timeError = validatePatientCancelTime(startTime, isDoctor);
+  if (timeError) return NextResponse.json({ error: timeError }, { status: 409 });
+
+  const newStatus = action === "done" ? "done" : "cancelled";
+  await supabaseAdmin.from("appointments").update({ status: newStatus }).eq("id", appointmentId);
+
+  if (newStatus === "cancelled") {
+    await supabaseAdmin.from("slots").update({ is_booked: false }).eq("id", appointment.slot_id);
+  }
+
+  return NextResponse.json({ success: true, status: newStatus });
 }

app/doctor/dashboard/page.tsx

@@ -91,9 +91,15 @@ export default function DoctorDashboard() {
     action: "done" | "cancel"
   ) {
     setActionMsg("");
+    const {
+      data: { session },
+    } = await supabase.auth.getSession();
     const res = await fetch("/api/appointments/cancel", {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${session?.access_token ?? ""}`,
+      },
       body: JSON.stringify({ appointmentId, action }),
     });
     const data = await res.json();