fix: maintain same ui across all the pages

frontend/src/pages/Doctor.tsx

@@ -1,5 +1,5 @@
-import {useState, useEffect, useCallback} from "react";
-import {AxiosError} from "axios";
+import { useState, useEffect, useCallback } from "react";
+import { AxiosError } from "axios";
 import {
 	getDoctorsApi,
 	createDoctorApi,
@@ -7,7 +7,7 @@ import {
 	deleteDoctorApi,
 	getDoctorTimingApi,
 } from "@/api/doctor";
-import {getDepartmentsApi} from "@/api/department";
+import { getDepartmentsApi } from "@/api/department";
 
 import {
 	Table,
@@ -17,8 +17,8 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
-import {Button} from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
@@ -26,9 +26,17 @@ import {
 	DialogTitle,
 	DialogFooter,
 } from "@/components/ui/dialog";
-import {Input} from "@/components/ui/input";
-import {Badge} from "@/components/ui/badge";
-import {Loader2, RefreshCw, Plus, Pencil, Trash} from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import {
+	Loader2,
+	RefreshCw,
+	Plus,
+	Pencil,
+	Trash,
+	ChevronLeft,
+	ChevronRight,
+} from "lucide-react";
 
 interface Department {
 	departmentId: string;
@@ -58,6 +66,9 @@ export default function DoctorPage() {
 	const [searchText, setSearchText] = useState("");
 	const [filterDepartment, setFilterDepartment] = useState("");
 
+	const [currentPage, setCurrentPage] = useState(1);
+	const itemsPerPage = 10;
+
 	const [form, setForm] = useState<any>({
 		doctorId: "",
 		name: "",
@@ -104,8 +115,17 @@ export default function DoctorPage() {
 		return matchesSearch && matchesDepartment;
 	});
 
+	useEffect(() => {
+		setCurrentPage(1);
+	}, [searchText, filterDepartment]);
+
+	const totalPages = Math.ceil(filteredDoctors.length / itemsPerPage);
+	const indexOfLastItem = currentPage * itemsPerPage;
+	const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+	const currentItems = filteredDoctors.slice(indexOfFirstItem, indexOfLastItem);
+
 	function handleChange(e: any) {
-		setForm({...form, [e.target.name]: e.target.value});
+		setForm({ ...form, [e.target.name]: e.target.value });
 	}
 
 	function handleDepartmentToggle(depId: string) {
@@ -120,7 +140,7 @@ export default function DoctorPage() {
 		} else {
 			setForm({
 				...form,
-				departments: [...form.departments, {departmentId: depId, timing: {}}],
+				departments: [...form.departments, { departmentId: depId, timing: {} }],
 			});
 		}
 	}
@@ -130,7 +150,7 @@ export default function DoctorPage() {
 			...form,
 			departments: form.departments.map((d: any) =>
 				d.departmentId === depId
-					? {...d, timing: {...d.timing, [day]: value}}
+					? { ...d, timing: { ...d.timing, [day]: value } }
 					: d,
 			),
 		});
@@ -197,22 +217,21 @@ export default function DoctorPage() {
 
 	return (
 		<div className="p-6 space-y-6">
-			{/* HEADER */}
-			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-3">
-				<h1 className="text-2xl font-bold">Doctors</h1>
+			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
+				<h1 className="text-3xl font-bold">Doctors</h1>
 
 				<div className="flex flex-wrap gap-3">
 					<Input
 						placeholder="Search doctor..."
 						value={searchText}
 						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[200px]"
+						className="w-[250px] text-base"
 					/>
 
 					<select
 						value={filterDepartment}
 						onChange={(e) => setFilterDepartment(e.target.value)}
-						className="flex h-10 w-[200px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+						className="flex h-10 w-[220px] rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
 					>
 						<option value="">All Departments</option>
 						{departments.map((dep) => (
@@ -222,95 +241,120 @@ export default function DoctorPage() {
 						))}
 					</select>
 
-					<Button variant="outline" onClick={fetchAll} disabled={loading}>
-						<RefreshCw className="mr-2 h-4 w-4" />
+					<Button
+						variant="outline"
+						onClick={fetchAll}
+						disabled={loading}
+						className="text-base"
+					>
+						<RefreshCw className="mr-2 h-5 w-5" />
 						Refresh
 					</Button>
 
-					<Button onClick={openAdd}>
-						<Plus className="mr-2 h-4 w-4" />
+					<Button onClick={openAdd} className="text-base">
+						<Plus className="mr-2 h-5 w-5" />
 						Add Doctor
 					</Button>
 				</div>
 			</div>
 
-			{/* TABLE */}
 			{error && (
-				<div className="p-4 text-red-600 bg-red-50 border rounded-md">
+				<div className="p-4 text-red-600 bg-red-50 border rounded-md text-base">
 					{error}
 				</div>
 			)}
 
 			<Card>
 				<CardHeader>
-					<CardTitle>Doctor List</CardTitle>
+					<CardTitle className="text-xl">Doctor List</CardTitle>
 				</CardHeader>
 
-				<CardContent className="p-0 sm:p-6">
-					<div className="rounded-md border overflow-x-auto max-w-full">
-						<Table className="w-full min-w-[800px] table-fixed">
-							<TableHeader>
+				<CardContent className="p-0 sm:p-6 space-y-4">
+					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
+						<Table className="w-full min-w-[900px] table-fixed border-separate border-spacing-0">
+							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
 								<TableRow>
-									<TableHead className="w-[80px]">ID</TableHead>
-									<TableHead className="w-[180px]">Name</TableHead>
-									<TableHead className="w-[150px]">Designation</TableHead>
-									<TableHead className="w-[150px]">Qualification</TableHead>
-									<TableHead className="w-[200px]">Departments</TableHead>
-									<TableHead className="w-[120px]">Actions</TableHead>
+									<TableHead className="w-[100px] bg-background text-sm font-bold">
+										ID
+									</TableHead>
+									<TableHead className="w-[200px] bg-background text-sm font-bold">
+										Name
+									</TableHead>
+									<TableHead className="w-[180px] bg-background text-sm font-bold">
+										Designation
+									</TableHead>
+									<TableHead className="w-[180px] bg-background text-sm font-bold">
+										Qualification
+									</TableHead>
+									<TableHead className="w-[220px] bg-background text-sm font-bold">
+										Departments
+									</TableHead>
+									<TableHead className="w-[120px] bg-background text-right text-sm font-bold">
+										Actions
+									</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={6} className="text-center">
-											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
+										<TableCell colSpan={6} className="text-center py-10">
+											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
-								) : filteredDoctors.length === 0 ? (
+								) : currentItems.length === 0 ? (
 									<TableRow>
 										<TableCell
 											colSpan={6}
-											className="text-center text-muted-foreground py-10"
+											className="text-center text-muted-foreground py-10 text-base"
 										>
 											No doctors found
 										</TableCell>
 									</TableRow>
 								) : (
-									filteredDoctors.map((doc) => (
-										<TableRow key={doc.doctorId}>
+									currentItems.map((doc) => (
+										<TableRow key={doc.doctorId} className="hover:bg-muted/50">
 											<TableCell className="truncate font-mono text-xs">
 												{doc.doctorId}
 											</TableCell>
 
 											<TableCell>
-												<div className="font-medium truncate" title={doc.name}>
+												<div
+													className="font-semibold text-base truncate"
+													title={doc.name}
+												>
 													{doc.name}
 												</div>
-												<div className="text-xs text-muted-foreground truncate">
+												<div className="text-xs text-muted-foreground truncate italic">
 													{doc.workingStatus}
 												</div>
 											</TableCell>
 
 											<TableCell>
-												<div className="truncate" title={doc.designation}>
+												<div
+													className="truncate text-sm"
+													title={doc.designation}
+												>
 													{doc.designation || "-"}
 												</div>
 											</TableCell>
 
 											<TableCell>
-												<div className="truncate" title={doc.qualification}>
+												<div
+													className="truncate text-sm"
+													title={doc.qualification}
+												>
 													{doc.qualification || "-"}
 												</div>
 											</TableCell>
 
 											<TableCell>
-												<div className="flex flex-wrap gap-1 max-h-[40px] overflow-hidden">
+												<div className="flex flex-wrap gap-1">
 													{doc.departments?.map((d: any) => (
 														<Badge
 															key={d.departmentId}
 															variant="secondary"
-															className="text-[10px] px-1"
+															className="text-xs px-2 h-5 leading-none"
 														>
 															{d.departmentName}
 														</Badge>
@@ -324,15 +368,17 @@ export default function DoctorPage() {
 											<TableCell className="text-right">
 												<div className="flex justify-end gap-2">
 													<Button
-														size="sm"
-														variant="outline"
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9"
 														onClick={() => openEdit(doc)}
 													>
 														<Pencil className="h-4 w-4" />
 													</Button>
 													<Button
-														size="sm"
-														variant="destructive"
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
 														onClick={() => handleDelete(doc.doctorId)}
 													>
 														<Trash className="h-4 w-4" />
@@ -345,54 +391,125 @@ export default function DoctorPage() {
 							</TableBody>
 						</Table>
 					</div>
+
+					{!loading && filteredDoctors.length > 0 && (
+						<div className="flex items-center justify-between px-2 py-6 border-t">
+							<div className="text-base text-muted-foreground">
+								Showing{" "}
+								<span className="font-semibold">{indexOfFirstItem + 1}</span> to{" "}
+								<span className="font-semibold">
+									{Math.min(indexOfLastItem, filteredDoctors.length)}
+								</span>{" "}
+								of{" "}
+								<span className="font-semibold">{filteredDoctors.length}</span>{" "}
+								doctors
+							</div>
+							<div className="flex items-center gap-6">
+								<div className="text-base font-semibold">
+									Page {currentPage} of {totalPages}
+								</div>
+								<div className="flex gap-2">
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.max(prev - 1, 1))
+										}
+										disabled={currentPage === 1}
+									>
+										<ChevronLeft className="h-5 w-5" />
+									</Button>
+									<Button
+										variant="outline"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() =>
+											setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+										}
+										disabled={currentPage === totalPages || totalPages === 0}
+									>
+										<ChevronRight className="h-5 w-5" />
+									</Button>
+								</div>
+							</div>
+						</div>
+					)}
 				</CardContent>
 			</Card>
 
-			{/* MODAL */}
 			<Dialog open={openModal} onOpenChange={setOpenModal}>
 				<DialogContent className="w-full !max-w-5xl max-h-[90vh] overflow-y-auto">
 					<DialogHeader>
-						<DialogTitle>{editing ? "Edit Doctor" : "Add Doctor"}</DialogTitle>
+						<DialogTitle className="text-2xl">
+							{editing ? "Edit Doctor" : "Add Doctor"}
+						</DialogTitle>
 					</DialogHeader>
 
-					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-						<div className="space-y-4">
-							<h3 className="font-semibold border-b pb-2">Basic Information</h3>
-							<Input
-								name="doctorId"
-								placeholder="Doctor ID"
-								value={form.doctorId}
-								onChange={handleChange}
-								disabled={!!editing}
-							/>
-							<Input
-								name="name"
-								placeholder="Name"
-								value={form.name}
-								onChange={handleChange}
-							/>
-							<Input
-								name="designation"
-								placeholder="Designation"
-								value={form.designation}
-								onChange={handleChange}
-							/>
-							<Input
-								name="workingStatus"
-								placeholder="Working Status (e.g. Active)"
-								value={form.workingStatus}
-								onChange={handleChange}
-							/>
-							<Input
-								name="qualification"
-								placeholder="Qualification"
-								value={form.qualification}
-								onChange={handleChange}
-							/>
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-6">
+						<div className="space-y-6">
+							<h3 className="font-bold text-base border-b pb-2">
+								Basic Information
+							</h3>
+							<div className="space-y-4">
+								<div className="space-y-1">
+									<label className="text-sm font-semibold">Doctor ID</label>
+									<Input
+										name="doctorId"
+										placeholder="GG-DOC-001"
+										value={form.doctorId}
+										onChange={handleChange}
+										disabled={!!editing}
+										className="text-base"
+									/>
+								</div>
+								<div className="space-y-1">
+									<label className="text-sm font-semibold">Full Name</label>
+									<Input
+										name="name"
+										placeholder="Dr. John Doe"
+										value={form.name}
+										onChange={handleChange}
+										className="text-base"
+									/>
+								</div>
+								<div className="space-y-1">
+									<label className="text-sm font-semibold">Designation</label>
+									<Input
+										name="designation"
+										placeholder="Senior Consultant"
+										value={form.designation}
+										onChange={handleChange}
+										className="text-base"
+									/>
+								</div>
+								<div className="space-y-1">
+									<label className="text-sm font-semibold">
+										Working Status
+									</label>
+									<Input
+										name="workingStatus"
+										placeholder="Active / On Call"
+										value={form.workingStatus}
+										onChange={handleChange}
+										className="text-base"
+									/>
+								</div>
+								<div className="space-y-1">
+									<label className="text-sm font-semibold">Qualification</label>
+									<Input
+										name="qualification"
+										placeholder="MBBS, MD"
+										value={form.qualification}
+										onChange={handleChange}
+										className="text-base"
+									/>
+								</div>
+							</div>
 
-							<div className="p-4 border rounded-md bg-muted/20">
-								<p className="text-sm font-medium mb-3">Assign Departments</p>
-								<div className="grid grid-cols-2 gap-2">
+							<div className="p-5 border rounded-md bg-muted/20">
+								<p className="text-base font-bold mb-4">Assign Departments</p>
+								<div className="grid grid-cols-2 gap-3">
 									{departments.map((dep) => {
 										const isSelected = form.departments.some(
 											(d: any) => d.departmentId === dep.departmentId,
@@ -403,7 +520,7 @@ export default function DoctorPage() {
 												type="button"
 												variant={isSelected ? "default" : "outline"}
 												size="sm"
-												className="justify-start"
+												className="justify-start text-sm h-9"
 												onClick={() => handleDepartmentToggle(dep.departmentId)}
 											>
 												{dep.name}
@@ -414,16 +531,16 @@ export default function DoctorPage() {
 							</div>
 						</div>
 
-						<div className="space-y-4">
-							<h3 className="font-semibold border-b pb-2">
+						<div className="space-y-6">
+							<h3 className="font-bold text-base border-b pb-2">
 								Working Hours / Timing
 							</h3>
 							{form.departments.length === 0 ? (
-								<div className="text-sm text-muted-foreground italic py-10 text-center">
-									Select a department to set timings
+								<div className="text-base text-muted-foreground italic py-24 text-center border-2 border-dashed rounded-lg">
+									Select a department to configure timing slots
 								</div>
 							) : (
-								<div className="space-y-6">
+								<div className="space-y-8">
 									{form.departments.map((dep: any) => {
 										const depName = departments.find(
 											(d) => d.departmentId === dep.departmentId,
@@ -431,20 +548,25 @@ export default function DoctorPage() {
 										return (
 											<div
 												key={dep.departmentId}
-												className="space-y-3 p-3 border rounded-lg bg-background shadow-sm"
+												className="space-y-4 p-5 border rounded-lg bg-background shadow-sm"
 											>
-												<p className="font-bold text-primary underline">
-													{depName}
-												</p>
-												<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+												<div className="flex items-center justify-between">
+													<p className="font-bold text-base text-primary">
+														{depName}
+													</p>
+													<Badge variant="outline" className="text-xs">
+														Timing Slot
+													</Badge>
+												</div>
+												<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3">
 													{DAYS.map((day) => (
 														<div key={day} className="space-y-1">
-															<label className="text-[10px] uppercase font-bold text-muted-foreground">
+															<label className="text-xs uppercase font-bold text-muted-foreground">
 																{day}
 															</label>
 															<Input
-																className="h-8 text-xs"
-																placeholder="e.g. 9 AM - 1 PM"
+																className="h-9 text-sm"
+																placeholder="e.g. 09:00 AM - 01:00 PM"
 																value={dep.timing?.[day] || ""}
 																onChange={(e) =>
 																	handleTimingChange(
@@ -465,12 +587,16 @@ export default function DoctorPage() {
 						</div>
 					</div>
 
-					<DialogFooter className="mt-6">
-						<Button variant="outline" onClick={() => setOpenModal(false)}>
+					<DialogFooter className="mt-10 pt-6 border-t">
+						<Button
+							variant="ghost"
+							onClick={() => setOpenModal(false)}
+							className="text-base"
+						>
 							Cancel
 						</Button>
-						<Button onClick={handleSubmit}>
-							{editing ? "Update Doctor" : "Create Doctor"}
+						<Button onClick={handleSubmit} className="px-10 text-base">
+							{editing ? "Save Changes" : "Create Doctor Profile"}
 						</Button>
 					</DialogFooter>
 				</DialogContent>