fix: maintain same ui across all the pages

frontend/src/pages/Career.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 
 import { getCareersApi, deleteCareerApi } from "@/api/career";
-
 import apiClient from "@/api/client";
 
 import {
@@ -15,7 +14,6 @@ import {
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-
 import {
 	Dialog,
 	DialogContent,
@@ -25,8 +23,17 @@ import {
 } from "@/components/ui/dialog";
 
 import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
 
-import { Loader2, Plus, Pencil, Trash, RefreshCw } from "lucide-react";
+import {
+	Loader2,
+	Plus,
+	Pencil,
+	Trash,
+	RefreshCw,
+	ChevronLeft,
+	ChevronRight,
+} from "lucide-react";
 
 export default function CareerPage() {
 	const [careers, setCareers] = useState<any[]>([]);
@@ -37,6 +44,9 @@ export default function CareerPage() {
 
 	const [searchText, setSearchText] = useState("");
 
+	const [currentPage, setCurrentPage] = useState(1);
+	const itemsPerPage = 10;
+
 	const [form, setForm] = useState({
 		post: "",
 		designation: "",
@@ -63,10 +73,21 @@ export default function CareerPage() {
 		fetchAll();
 	}, [fetchAll]);
 
-	const filteredCareers = careers.filter((item) =>
-		item.post?.toLowerCase().includes(searchText.toLowerCase()),
+	const filteredCareers = careers.filter(
+		(item) =>
+			item.post?.toLowerCase().includes(searchText.toLowerCase()) ||
+			item.designation?.toLowerCase().includes(searchText.toLowerCase()),
 	);
 
+	useEffect(() => {
+		setCurrentPage(1);
+	}, [searchText]);
+
+	const totalPages = Math.ceil(filteredCareers.length / itemsPerPage);
+	const indexOfLastItem = currentPage * itemsPerPage;
+	const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+	const currentItems = filteredCareers.slice(indexOfFirstItem, indexOfLastItem);
+
 	function handleChange(e: any) {
 		setForm({ ...form, [e.target.name]: e.target.value });
 	}
@@ -87,7 +108,6 @@ export default function CareerPage() {
 
 	function openEdit(item: any) {
 		setEditing(item);
-
 		setForm({
 			post: item.post || "",
 			designation: item.designation || "",
@@ -97,7 +117,6 @@ export default function CareerPage() {
 			number: item.number || "",
 			status: item.status || "new",
 		});
-
 		setOpenModal(true);
 	}
 
@@ -108,7 +127,6 @@ export default function CareerPage() {
 			} else {
 				await apiClient.post("/careers", form);
 			}
-
 			setOpenModal(false);
 			fetchAll();
 		} catch (err) {
@@ -124,24 +142,29 @@ export default function CareerPage() {
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex justify-between items-center gap-3 flex-wrap">
-				<h1 className="text-2xl font-bold">Careers</h1>
+			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
+				<h1 className="text-3xl font-bold">Careers</h1>
 
-				<div className="flex gap-2 flex-wrap">
+				<div className="flex flex-wrap gap-3">
 					<Input
-						placeholder="Search career..."
+						placeholder="Search post / designation..."
 						value={searchText}
 						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[220px]"
+						className="w-[250px] text-base"
 					/>
 
-					<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 Career
 					</Button>
 				</div>
@@ -149,67 +172,113 @@ export default function CareerPage() {
 
 			<Card>
 				<CardHeader>
-					<CardTitle>Career List</CardTitle>
+					<CardTitle className="text-xl">Career Opportunities</CardTitle>
 				</CardHeader>
 
-				<CardContent>
-					<div className="overflow-x-auto">
-						<Table className="min-w-[900px]">
-							<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-[1000px] table-fixed border-separate border-spacing-0">
+							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
 								<TableRow>
-									<TableHead>ID</TableHead>
-									<TableHead>Post</TableHead>
-									<TableHead>Designation</TableHead>
-									<TableHead>Qualification</TableHead>
-									<TableHead>Experience</TableHead>
-									<TableHead>Email</TableHead>
-									<TableHead>Phone</TableHead>
-									<TableHead>Status</TableHead>
-									<TableHead>Actions</TableHead>
+									<TableHead className="w-[60px] bg-background font-bold text-sm">
+										ID
+									</TableHead>
+									<TableHead className="w-[200px] bg-background font-bold text-sm">
+										Post & Designation
+									</TableHead>
+									<TableHead className="w-[200px] bg-background font-bold text-sm">
+										Qualification
+									</TableHead>
+									<TableHead className="w-[120px] bg-background font-bold text-sm">
+										Experience
+									</TableHead>
+									<TableHead className="w-[200px] bg-background font-bold text-sm">
+										Contact Info
+									</TableHead>
+									<TableHead className="w-[100px] bg-background font-bold text-sm">
+										Status
+									</TableHead>
+									<TableHead className="w-[120px] bg-background font-bold text-right text-sm">
+										Actions
+									</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={9} className="text-center">
-											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
+										<TableCell colSpan={7} className="text-center py-10">
+											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
-								) : filteredCareers.length === 0 ? (
+								) : currentItems.length === 0 ? (
 									<TableRow>
-										<TableCell colSpan={9} className="text-center">
+										<TableCell
+											colSpan={7}
+											className="text-center text-muted-foreground py-10 text-base"
+										>
 											No careers found
 										</TableCell>
 									</TableRow>
 								) : (
-									filteredCareers.map((item) => (
-										<TableRow key={item.id}>
-											<TableCell>{item.id}</TableCell>
-											<TableCell>{item.post}</TableCell>
-											<TableCell>{item.designation}</TableCell>
-											<TableCell>{item.qualification}</TableCell>
-											<TableCell>{item.experienceNeed}</TableCell>
-											<TableCell>{item.email}</TableCell>
-											<TableCell>{item.number}</TableCell>
-											<TableCell>{item.status}</TableCell>
-
-											<TableCell className="flex gap-2">
-												<Button
-													size="sm"
-													variant="outline"
-													onClick={() => openEdit(item)}
+									currentItems.map((item) => (
+										<TableRow key={item.id} className="hover:bg-muted/50">
+											<TableCell className="font-mono text-xs">
+												{item.id}
+											</TableCell>
+											<TableCell>
+												<div className="font-semibold text-base truncate">
+													{item.post}
+												</div>
+												<div className="text-xs text-muted-foreground truncate">
+													{item.designation}
+												</div>
+											</TableCell>
+											<TableCell>
+												<div className="text-sm line-clamp-2">
+													{item.qualification}
+												</div>
+											</TableCell>
+											<TableCell className="text-sm">
+												{item.experienceNeed}
+											</TableCell>
+											<TableCell>
+												<div className="text-sm font-medium">{item.email}</div>
+												<div className="text-xs text-muted-foreground">
+													{item.number}
+												</div>
+											</TableCell>
+											<TableCell>
+												<Badge
+													variant={
+														item.status === "active" ? "default" : "secondary"
+													}
+													className="capitalize"
 												>
-													<Pencil className="h-4 w-4" />
-												</Button>
+													{item.status}
+												</Badge>
+											</TableCell>
 
-												<Button
-													size="sm"
-													variant="destructive"
-													onClick={() => handleDelete(item.id)}
-												>
-													<Trash 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={() => openEdit(item)}
+													>
+														<Pencil 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(item.id)}
+													>
+														<Trash className="h-4 w-4" />
+													</Button>
+												</div>
 											</TableCell>
 										</TableRow>
 									))
@@ -217,67 +286,126 @@ export default function CareerPage() {
 							</TableBody>
 						</Table>
 					</div>
+
+					{!loading && filteredCareers.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, filteredCareers.length)}
+								</span>{" "}
+								of{" "}
+								<span className="font-semibold">{filteredCareers.length}</span>{" "}
+								careers
+							</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>
+				<DialogContent className="w-full max-w-lg">
 					<DialogHeader>
-						<DialogTitle>{editing ? "Edit Career" : "Add Career"}</DialogTitle>
+						<DialogTitle className="text-2xl">
+							{editing ? "Edit Career" : "Add New Career"}
+						</DialogTitle>
 					</DialogHeader>
 
-					<div className="space-y-3">
-						<Input
-							name="post"
-							placeholder="Post"
-							value={form.post}
-							onChange={handleChange}
-						/>
-						<Input
-							name="designation"
-							placeholder="Designation"
-							value={form.designation}
-							onChange={handleChange}
-						/>
-						<Input
-							name="qualification"
-							placeholder="Qualification"
-							value={form.qualification}
-							onChange={handleChange}
-						/>
-						<Input
-							name="experienceNeed"
-							placeholder="Experience Needed"
-							value={form.experienceNeed}
-							onChange={handleChange}
-						/>
-						<Input
-							name="email"
-							placeholder="Email"
-							value={form.email}
-							onChange={handleChange}
-						/>
-						<Input
-							name="number"
-							placeholder="Phone Number"
-							value={form.number}
-							onChange={handleChange}
-						/>
-						<Input
-							name="status"
-							placeholder="Status"
-							value={form.status}
-							onChange={handleChange}
-						/>
+					<div className="space-y-4 py-4">
+						<div className="grid grid-cols-1 gap-4">
+							<Input
+								name="post"
+								placeholder="Post (e.g. Staff Nurse)"
+								value={form.post}
+								onChange={handleChange}
+								className="text-base"
+							/>
+							<Input
+								name="designation"
+								placeholder="Designation"
+								value={form.designation}
+								onChange={handleChange}
+								className="text-base"
+							/>
+							<Input
+								name="qualification"
+								placeholder="Qualification"
+								value={form.qualification}
+								onChange={handleChange}
+								className="text-base"
+							/>
+							<Input
+								name="experienceNeed"
+								placeholder="Experience Needed"
+								value={form.experienceNeed}
+								onChange={handleChange}
+								className="text-base"
+							/>
+							<Input
+								name="email"
+								type="email"
+								placeholder="HR Email Address"
+								value={form.email}
+								onChange={handleChange}
+								className="text-base"
+							/>
+							<Input
+								name="number"
+								placeholder="Contact Number"
+								value={form.number}
+								onChange={handleChange}
+								className="text-base"
+							/>
+							<Input
+								name="status"
+								placeholder="Status (e.g. active / closed)"
+								value={form.status}
+								onChange={handleChange}
+								className="text-base"
+							/>
+						</div>
 					</div>
 
-					<DialogFooter>
-						<Button variant="outline" onClick={() => setOpenModal(false)}>
+					<DialogFooter className="pt-4 border-t">
+						<Button
+							variant="ghost"
+							onClick={() => setOpenModal(false)}
+							className="text-base"
+						>
 							Cancel
 						</Button>
-						<Button onClick={handleSubmit}>
-							{editing ? "Update" : "Create"}
+						<Button onClick={handleSubmit} className="px-8 text-base">
+							{editing ? "Save Changes" : "Create Career"}
 						</Button>
 					</DialogFooter>
 				</DialogContent>