Task 2: Appointment Booking System

app/admin/dashboard/page.tsx

@@ -0,0 +1,94 @@
+import { redirect } from "next/navigation";
+import { cookies } from "next/headers";
+import { supabaseAdmin } from "@/lib/supabaseAdmin";
+
+function formatDateTime(iso: string) {
+  return new Date(iso).toLocaleString("en-IN", {
+    dateStyle: "medium",
+    timeStyle: "short",
+  });
+}
+
+export default async function AdminDashboard() {
+  const cookieStore = await cookies();
+  const adminToken = cookieStore.get("admin_token");
+
+  if (!adminToken) {
+    redirect("/admin/login");
+  }
+
+  const { data: appointments, error } = await supabaseAdmin
+    .from("appointments")
+    .select("id, status, created_at, patients(name, email), doctors(name, specialty, email), slots(start_time, end_time)")
+    .order("created_at", { ascending: false });
+
+  if (error) {
+    return <div className="p-8 text-red-500">Failed to load appointments.</div>;
+  }
+
+  return (
+    <main className="min-h-screen bg-gray-50 p-6">
+      <div className="mx-auto max-w-6xl">
+        <div className="mb-6 flex items-center justify-between">
+          <h1 className="text-2xl font-bold">System Admin Dashboard</h1>
+          <a
+            href="/"
+            className="rounded-lg border px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"
+          >
+            Go Home
+          </a>
+        </div>
+
+        <section>
+          <h2 className="mb-3 text-lg font-semibold">All Appointments Hub</h2>
+          {(!appointments || appointments.length === 0) ? (
+            <p className="text-sm text-gray-500">No appointments in the system.</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">Slot Time</th>
+                    <th className="px-4 py-3 font-medium">Status</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y">
+                  {appointments.map((appt: any) => (
+                    <tr key={appt.id}>
+                      <td className="px-4 py-3">
+                        <div className="font-medium text-gray-900">{appt.patients?.name || "Unknown"}</div>
+                        <div className="text-xs text-gray-500">{appt.patients?.email}</div>
+                      </td>
+                      <td className="px-4 py-3">
+                        <div className="font-medium text-gray-900">{appt.doctors?.name || "Unknown"}</div>
+                        <div className="text-xs text-gray-500">{appt.doctors?.specialty} • {appt.doctors?.email}</div>
+                      </td>
+                      <td className="px-4 py-3 text-gray-500">
+                        {appt.slots?.start_time ? formatDateTime(appt.slots.start_time) : "N/A"}
+                      </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>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </section>
+      </div>
+    </main>
+  );
+}

app/admin/login/page.tsx

@@ -0,0 +1,82 @@
+"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) {
+      const data = await res.json();
+      setError(data.error || "Login failed");
+      setLoading(false);
+      return;
+    }
+
+    router.push("/admin/dashboard");
+  }
+
+  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-blue-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-blue-500"
+            />
+          </div>
+          {error && <p className="text-sm text-red-600">{error}</p>}
+          <button
+            type="submit"
+            disabled={loading}
+            className="rounded-lg bg-blue-600 py-2 font-medium text-white hover:bg-blue-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-blue-600 hover:underline">
+            ← Back to home
+          </Link>
+        </p>
+      </div>
+    </main>
+  );
+}

app/api/admin/login/route.ts

@@ -0,0 +1,33 @@
+import { NextRequest, NextResponse } from "next/server";
+import { supabaseAdmin } from "@/lib/supabaseAdmin";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { email, password } = await req.json();
+
+    const { data: admin, error } = await supabaseAdmin
+      .from("system_admins")
+      .select("*")
+      .eq("email", email)
+      .single();
+
+    if (error || !admin) {
+      return NextResponse.json({ error: "Invalid email or password" }, { status: 401 });
+    }
+
+    if (admin.password !== password) {
+      return NextResponse.json({ error: "Invalid email or password" }, { status: 401 });
+    }
+
+    const response = NextResponse.json({ success: true });
+    response.cookies.set("admin_token", admin.id, {
+      httpOnly: true,
+      path: "/",
+      maxAge: 60 * 60 * 24 * 7, // 1 week
+    });
+
+    return response;
+  } catch (error) {
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+  }
+}

app/api/appointments/book/route.ts

@@ -1,5 +1,105 @@
 import { NextRequest, NextResponse } from "next/server";
+import { supabaseAdmin } from "@/lib/supabaseAdmin";
+import { canPatientBookSlot, canPatientBookDoctor } from "@/lib/appointment-rules";
 
-export async function POST(_req: NextRequest) {
-  return NextResponse.json({ error: "Not implemented" }, { status: 501 });
-}
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json();
+
+    const { patient_id, doctor_id, slot_id } = body;
+
+    console.log("RECEIVED:", { patient_id, doctor_id, slot_id });
+
+    // 1. Validate input
+    if (!patient_id || !doctor_id || !slot_id) {
+      return NextResponse.json(
+        { error: "Missing required fields" },
+        { status: 400 }
+      );
+    }
+
+    // 2. Fetch slot safely
+    const { data: slots, error } = await supabaseAdmin
+      .from("slots")
+      .select("*");
+
+    if (error) {
+      console.error(error);
+      return NextResponse.json(
+        { error: "Error fetching slots" },
+        { status: 500 }
+      );
+    }
+
+    const slot = slots?.find((s) => s.id === slot_id);
+
+    if (!slot) {
+      return NextResponse.json(
+        { error: "Slot not found" },
+        { status: 404 }
+      );
+    }
+
+    // 3. Check if already booked
+    if (!canPatientBookSlot(slot)) {
+      return NextResponse.json(
+        { error: "Slot already booked" },
+        { status: 400 }
+      );
+    }
+
+    // 4. Check existing appointment with same doctor
+    const { data: existing } = await supabaseAdmin
+      .from("appointments")
+      .select("status")
+      .eq("patient_id", patient_id)
+      .eq("doctor_id", doctor_id);
+
+    if (existing && !canPatientBookDoctor(existing)) {
+      return NextResponse.json(
+        { error: "Already have an active appointment with this doctor" },
+        { status: 400 }
+      );
+    }
+
+    // 5. Insert appointment
+    const { data: insertData, error: insertError } = await supabaseAdmin
+      .from("appointments")
+      .insert([
+        {
+          patient_id,
+          doctor_id,
+          slot_id,
+          status: "active",
+        },
+      ])
+      .select("id, status, slots(id, start_time, end_time), doctors(id, name, specialty)")
+      .single();
+
+    if (insertError) {
+      console.error(insertError);
+      return NextResponse.json(
+        { error: insertError.message },
+        { status: 500 }
+      );
+    }
+
+    // 6. Update slot
+    await supabaseAdmin
+      .from("slots")
+      .update({ is_booked: true })
+      .eq("id", slot_id);
+
+    return NextResponse.json({
+      message: "Appointment booked successfully",
+      appointment: insertData
+    });
+
+  } catch (err: any) {
+    console.error("ERROR:", err);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}