appointment frontend

Author: linasliyakath

frontend/package.json

@@ -9,7 +9,9 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.90.21",
     "axios": "^1.13.5",
+    "date-fns": "^4.1.0",
     "lucide-react": "^0.575.0",
     "next": "16.1.6",
     "react": "19.2.3",

frontend/pnpm-lock.yaml

@@ -0,0 +1,21 @@
+'use client';
+
+import { useAppointmentHistory } from '../../../../features/appointments/hooks/useAppointmentHistory';
+import AppointmentList from '../../../../features/appointments/components/AppointmentList';
+import { useCancelAppointment } from '@/src/features/appointments/hooks/useCancelAppointment';
+
+export default function AppointmentsPage() {
+  const { data, isLoading } = useAppointmentHistory();
+
+  if (isLoading) return <p>Loading...</p>;
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-6">
+        My Appointments
+      </h1>
+
+      <AppointmentList appointments={data || []} />
+    </div>
+  );
+}

frontend/public/staff.jpg

@@ -0,0 +1,24 @@
+import BookingForm from '../../../../features/appointments/components/BookingForm';
+
+export default function BookPage() {
+  return (
+    <div className="min-h-[calc(100vh-80px)] bg-gray-50 p-8">
+
+      {/* Page Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-semibold text-gray-900">
+          Book Appointment
+        </h1>
+        <p className="text-gray-500 mt-1">
+          Choose a department, doctor and available time slot.
+        </p>
+      </div>
+
+      {/* Card Container */}
+      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 max-w-3xl">
+        <BookingForm />
+      </div>
+
+    </div>
+  );
+}

frontend/src/app/(patient)/dashboard/appointments/page.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { useAuth } from '../../../auth/auth.provider';
+import { useRouter, usePathname } from 'next/navigation';
+import { useEffect } from 'react';
+import Link from 'next/link';
+
+export default function PatientDashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { auth, logout } = useAuth();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (!auth.isRestoring && !auth.accessToken) {
+      router.replace('/login');
+    }
+  }, [auth.isRestoring, auth.accessToken, router]);
+
+  if (auth.isRestoring) return <div>Loading...</div>;
+  if (!auth.accessToken) return null;
+
+  return (
+    <div className="h-screen flex overflow-hidden">
+
+      {/* Sidebar */}
+      <aside className="w-64 bg-white text-black p-6 flex flex-col justify-between">
+        <div>
+          <h2 className="text-lg font-bold mb-8">
+            Patient Panel
+          </h2>
+
+          <nav className="space-y-4">
+
+            <SidebarLink
+              href="/dashboard"
+              label="Dashboard"
+              active={pathname === '/dashboard'}
+            />
+
+            <SidebarLink
+              href="/dashboard/appointments"
+              label="Appointments"
+              active={pathname === '/dashboard/appointments'}
+            />
+
+            <SidebarLink
+              href="/dashboard/book"
+              label="Book Appointment"
+              active={pathname === '/dashboard/book'}
+            />
+
+          </nav>
+        </div>
+
+        <button
+          onClick={logout}
+          className="bg-red-500 hover:bg-red-600 px-4 py-2 rounded"
+        >
+          Logout
+        </button>
+      </aside>
+
+      {/* Right Content */}
+      <main className="flex-1 bg-gray-100 overflow-y-auto p-8">
+        {children}
+      </main>
+    </div>
+  );
+}
+
+function SidebarLink({
+  href,
+  label,
+  active,
+}: {
+  href: string;
+  label: string;
+  active: boolean;
+}) {
+  return (
+    <Link
+      href={href}
+      className='block px-3 py-2 rounded bg-white text-black font-semibold hover:border-2'
+    >
+      {label}
+    </Link>
+  );
+}

frontend/src/app/(patient)/dashboard/book/page.tsx

@@ -0,0 +1,13 @@
+export default function DashboardHome() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">
+        Welcome to your Dashboard
+      </h1>
+
+      <p>
+        Overview content goes here.
+      </p>
+    </div>
+  );
+}

frontend/src/app/(patient)/dashboard/layout.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { AuthProvider } from '@/src/auth/auth.provider';
+
+export default function PatientRootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <AuthProvider>
+      {children}
+    </AuthProvider>
+  );
+}