fix: maintain same ui across all the pages

frontend/src/pages/Department.tsx

@@ -31,7 +31,16 @@ import {
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 
-import { Loader2, RefreshCw, Plus, Pencil, Trash, Eye } from "lucide-react";
+import {
+	Loader2,
+	RefreshCw,
+	Plus,
+	Pencil,
+	Trash,
+	Eye,
+	ChevronLeft,
+	ChevronRight,
+} from "lucide-react";
 
 interface Department {
 	departmentId: string;
@@ -56,6 +65,9 @@ export default function DepartmentPage() {
 
 	const [searchText, setSearchText] = useState("");
 
+	const [currentPage, setCurrentPage] = useState(1);
+	const itemsPerPage = 10;
+
 	const [form, setForm] = useState<Department>({
 		departmentId: "",
 		name: "",
@@ -88,8 +100,22 @@ export default function DepartmentPage() {
 		fetchDepartments();
 	}, [fetchDepartments]);
 
-	const filteredDepartments = departments.filter((dep) =>
-		dep.name.toLowerCase().includes(searchText.toLowerCase()),
+	const filteredDepartments = departments.filter(
+		(dep) =>
+			dep.name.toLowerCase().includes(searchText.toLowerCase()) ||
+			dep.departmentId.toLowerCase().includes(searchText.toLowerCase()),
+	);
+
+	useEffect(() => {
+		setCurrentPage(1);
+	}, [searchText]);
+
+	const totalPages = Math.ceil(filteredDepartments.length / itemsPerPage);
+	const indexOfLastItem = currentPage * itemsPerPage;
+	const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+	const currentItems = filteredDepartments.slice(
+		indexOfFirstItem,
+		indexOfLastItem,
 	);
 
 	function handleChange(e: any) {
@@ -155,118 +181,153 @@ export default function DepartmentPage() {
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-3">
-				<h1 className="text-2xl font-bold">Departments</h1>
+			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
+				<h1 className="text-3xl font-bold">Departments</h1>
 
 				<div className="flex flex-wrap gap-3">
 					<Input
 						placeholder="Search department..."
 						value={searchText}
 						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[220px]"
+						className="w-[250px] text-base"
 					/>
 
 					<Button
 						variant="outline"
 						onClick={fetchDepartments}
-						disabled={loading}>
-						<RefreshCw className="mr-2 h-4 w-4" />
+						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 Department
 					</Button>
 				</div>
 			</div>
 
 			{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>Department List</CardTitle>
+					<CardTitle className="text-xl">Department List</CardTitle>
 				</CardHeader>
 
-				<CardContent>
-					<div className="border rounded-md max-h-[500px] overflow-y-auto">
-						<Table className="w-full 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-[250px]">Para1</TableHead>
-									<TableHead className="w-[220px]">Facilities</TableHead>
-									<TableHead className="w-[220px]">Services</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-[250px] bg-background text-sm font-bold">
+										Para 1
+									</TableHead>
+									<TableHead className="w-[220px] bg-background text-sm font-bold">
+										Facilities
+									</TableHead>
+									<TableHead className="w-[220px] bg-background text-sm font-bold">
+										Services
+									</TableHead>
+									<TableHead className="w-[140px] 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>
-								) : filteredDepartments.length === 0 ? (
+								) : currentItems.length === 0 ? (
 									<TableRow>
-										<TableCell colSpan={6} className="text-center">
+										<TableCell
+											colSpan={6}
+											className="text-center text-muted-foreground py-10 text-base"
+										>
 											No departments found
 										</TableCell>
 									</TableRow>
 								) : (
-									filteredDepartments.map((dep) => (
-										<TableRow key={dep.departmentId}>
-											<TableCell>{dep.departmentId}</TableCell>
-
-											<TableCell>
-												<div className="break-words">{dep.name}</div>
+									currentItems.map((dep) => (
+										<TableRow
+											key={dep.departmentId}
+											className="hover:bg-muted/50"
+										>
+											<TableCell className="font-mono text-xs">
+												{dep.departmentId}
 											</TableCell>
 
 											<TableCell>
-												<div className="break-words whitespace-normal">
+												<div
+													className="font-semibold text-base truncate"
+													title={dep.name}
+												>
+													{dep.name}
+												</div>
+											</TableCell>
+
+											<TableCell>
+												<div className="text-sm break-words whitespace-normal">
 													{truncate(dep.para1)}
 												</div>
 											</TableCell>
 
 											<TableCell>
-												<div className="break-words whitespace-normal">
+												<div className="text-sm break-words whitespace-normal">
 													{truncate(dep.facilities)}
 												</div>
 											</TableCell>
 
 											<TableCell>
-												<div className="break-words whitespace-normal">
+												<div className="text-sm break-words whitespace-normal">
 													{truncate(dep.services)}
 												</div>
 											</TableCell>
 
-											<TableCell className="flex gap-2 whitespace-nowrap">
-												<Button
-													size="sm"
-													variant="outline"
-													onClick={() => openView(dep)}>
-													<Eye className="h-4 w-4" />
-												</Button>
+											<TableCell className="text-right">
+												<div className="flex justify-end gap-2">
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9"
+														onClick={() => openView(dep)}
+													>
+														<Eye className="h-4 w-4" />
+													</Button>
 
-												<Button
-													size="sm"
-													variant="outline"
-													onClick={() => openEdit(dep)}>
-													<Pencil className="h-4 w-4" />
-												</Button>
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9"
+														onClick={() => openEdit(dep)}
+													>
+														<Pencil className="h-4 w-4" />
+													</Button>
 
-												<Button
-													size="sm"
-													variant="destructive"
-													onClick={() => handleDelete(dep.departmentId)}>
-													<Trash className="h-4 w-4" />
-												</Button>
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
+														onClick={() => handleDelete(dep.departmentId)}
+													>
+														<Trash className="h-4 w-4" />
+													</Button>
+												</div>
 											</TableCell>
 										</TableRow>
 									))
@@ -274,6 +335,52 @@ export default function DepartmentPage() {
 							</TableBody>
 						</Table>
 					</div>
+
+					{!loading && filteredDepartments.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, filteredDepartments.length)}
+								</span>{" "}
+								of{" "}
+								<span className="font-semibold">
+									{filteredDepartments.length}
+								</span>{" "}
+								departments
+							</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>
 
@@ -346,7 +453,6 @@ export default function DepartmentPage() {
 
 			<Dialog open={viewOpen} onOpenChange={setViewOpen}>
 				<DialogContent className="w-full !max-w-5xl max-h-[90vh] overflow-y-auto">
-					{" "}
 					<DialogHeader>
 						<DialogTitle>Department Details</DialogTitle>
 					</DialogHeader>
@@ -355,35 +461,29 @@ export default function DepartmentPage() {
 							<p>
 								<b>ID:</b> {viewData.departmentId}
 							</p>
-
 							<p>
 								<b>Name:</b> {viewData.name}
 							</p>
-
 							<p>
 								<b>Para1:</b>
 								<br />
 								{viewData.para1}
 							</p>
-
 							<p>
 								<b>Para2:</b>
 								<br />
 								{viewData.para2}
 							</p>
-
 							<p>
 								<b>Para3:</b>
 								<br />
 								{viewData.para3}
 							</p>
-
 							<p>
 								<b>Facilities:</b>
 								<br />
 								{viewData.facilities}
 							</p>
-
 							<p>
 								<b>Services:</b>
 								<br />