fix: maintain same ui across all the pages

frontend/src/pages/candidates.tsx

@@ -13,11 +13,26 @@ import {
 } from "@/components/ui/table";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogFooter,
+} from "@/components/ui/dialog";
 
-import { Loader2, Trash, RefreshCw, Download } from "lucide-react";
+import {
+	Loader2,
+	Trash,
+	RefreshCw,
+	Download,
+	ChevronLeft,
+	ChevronRight,
+	Eye,
+	User,
+} from "lucide-react";
 
 export default function CandidatePage() {
 	const [candidates, setCandidates] = useState<any[]>([]);
@@ -26,6 +41,12 @@ export default function CandidatePage() {
 	const [searchText, setSearchText] = useState("");
 	const [filterCareer, setFilterCareer] = useState("");
 
+	const [viewOpen, setViewOpen] = useState(false);
+	const [viewData, setViewData] = useState<any>(null);
+
+	const [currentPage, setCurrentPage] = useState(1);
+	const itemsPerPage = 10;
+
 	const fetchAll = useCallback(async () => {
 		setLoading(true);
 		try {
@@ -55,6 +76,23 @@ export default function CandidatePage() {
 		return matchesSearch && matchesCareer;
 	});
 
+	useEffect(() => {
+		setCurrentPage(1);
+	}, [searchText, filterCareer]);
+
+	const totalPages = Math.ceil(filteredCandidates.length / itemsPerPage);
+	const indexOfLastItem = currentPage * itemsPerPage;
+	const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+	const currentItems = filteredCandidates.slice(
+		indexOfFirstItem,
+		indexOfLastItem,
+	);
+
+	function openView(item: any) {
+		setViewData(item);
+		setViewOpen(true);
+	}
+
 	async function handleDelete(id: number) {
 		if (!confirm("Delete candidate?")) return;
 		await deleteCandidateApi(id);
@@ -71,7 +109,7 @@ export default function CandidatePage() {
 			Designation: item.career?.designation,
 			Subject: item.subject,
 			CoverLetter: item.coverLetter,
-			Date: new Date(item.createdAt).toLocaleDateString(),
+			AppliedDate: new Date(item.createdAt).toLocaleDateString(),
 		}));
 
 		exportToExcel(exportData, "candidates");
@@ -79,31 +117,36 @@ export default function CandidatePage() {
 
 	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">Candidates</h1>
+			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
+				<h1 className="text-3xl font-bold">Candidates</h1>
 
-				<div className="flex flex-wrap gap-2">
+				<div className="flex flex-wrap gap-3">
 					<Input
-						placeholder="Search name / phone / email..."
+						placeholder="Search candidate..."
 						value={searchText}
 						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[220px]"
+						className="w-[250px] text-base"
 					/>
 
 					<Input
-						placeholder="Filter Career"
+						placeholder="Filter by Career"
 						value={filterCareer}
 						onChange={(e) => setFilterCareer(e.target.value)}
-						className="w-[200px]"
+						className="w-[200px] 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 variant="outline" onClick={handleExport}>
-						<Download className="mr-2 h-4 w-4" />
+					<Button onClick={handleExport} className="text-base">
+						<Download className="mr-2 h-5 w-5" />
 						Export
 					</Button>
 				</div>
@@ -111,68 +154,104 @@ export default function CandidatePage() {
 
 			<Card>
 				<CardHeader>
-					<CardTitle>Candidate List</CardTitle>
+					<CardTitle className="text-xl">Application List</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-[1100px] table-fixed border-separate border-spacing-0">
+							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
 								<TableRow>
-									<TableHead>ID</TableHead>
-									<TableHead>Name</TableHead>
-									<TableHead>Phone</TableHead>
-									<TableHead>Email</TableHead>
-									<TableHead>Career</TableHead>
-									<TableHead>Designation</TableHead>
-									<TableHead>Subject</TableHead>
-									<TableHead>Cover Letter</TableHead>
-									<TableHead>Applied On</TableHead>
-									<TableHead>Actions</TableHead>
+									<TableHead className="w-[60px] bg-background font-bold text-sm">
+										ID
+									</TableHead>
+									<TableHead className="w-[220px] bg-background font-bold text-sm">
+										Full Name
+									</TableHead>
+									<TableHead className="w-[180px] bg-background font-bold text-sm">
+										Career & Post
+									</TableHead>
+									<TableHead className="w-[150px] bg-background font-bold text-sm">
+										Contact
+									</TableHead>
+									<TableHead className="w-[140px] bg-background font-bold text-sm">
+										Applied On
+									</TableHead>
+									<TableHead className="w-[250px] bg-background font-bold text-sm">
+										Cover Letter
+									</TableHead>
+									<TableHead className="w-[120px] bg-background font-bold text-right text-sm">
+										Actions
+									</TableHead>
 								</TableRow>
 							</TableHeader>
 
 							<TableBody>
 								{loading ? (
 									<TableRow>
-										<TableCell colSpan={10} 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>
-								) : filteredCandidates.length === 0 ? (
+								) : currentItems.length === 0 ? (
 									<TableRow>
-										<TableCell colSpan={10} className="text-center">
+										<TableCell
+											colSpan={7}
+											className="text-center text-muted-foreground py-10 text-base"
+										>
 											No candidates found
 										</TableCell>
 									</TableRow>
 								) : (
-									filteredCandidates.map((item) => (
-										<TableRow key={item.id}>
-											<TableCell>{item.id}</TableCell>
-											<TableCell>{item.fullName}</TableCell>
-											<TableCell>{item.mobile}</TableCell>
-											<TableCell>{item.email}</TableCell>
-
-											<TableCell>{item.career?.post}</TableCell>
-											<TableCell>{item.career?.designation}</TableCell>
-
-											<TableCell>{item.subject}</TableCell>
-
-											<TableCell className="max-w-[250px] whitespace-normal">
-												{item.coverLetter}
+									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.fullName}
+												</div>
+												<div className="text-xs text-muted-foreground truncate">
+													{item.email}
+												</div>
+											</TableCell>
+											<TableCell>
+												<div className="text-sm font-medium">
+													{item.career?.post || "-"}
+												</div>
+												<div className="text-[10px] text-muted-foreground truncate">
+													{item.career?.designation}
+												</div>
+											</TableCell>
+											<TableCell className="text-sm">{item.mobile}</TableCell>
+											<TableCell className="text-sm">
 												{new Date(item.createdAt).toLocaleDateString()}
 											</TableCell>
-
 											<TableCell>
-												<Button
-													size="sm"
-													variant="destructive"
-													onClick={() => handleDelete(item.id)}>
-													<Trash className="h-4 w-4" />
-												</Button>
+												<div className="text-sm line-clamp-2 text-muted-foreground italic">
+													{item.coverLetter || "No cover letter provided."}
+												</div>
+											</TableCell>
+											<TableCell className="text-right">
+												<div className="flex justify-end gap-2">
+													<Button
+														size="icon"
+														variant="ghost"
+														className="h-9 w-9"
+														onClick={() => openView(item)}
+													>
+														<Eye 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>
 									))
@@ -180,8 +259,126 @@ export default function CandidatePage() {
 							</TableBody>
 						</Table>
 					</div>
+
+					{!loading && filteredCandidates.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, filteredCandidates.length)}
+								</span>{" "}
+								of{" "}
+								<span className="font-semibold">
+									{filteredCandidates.length}
+								</span>
+							</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>
+
+			<Dialog open={viewOpen} onOpenChange={setViewOpen}>
+				<DialogContent className="w-full !max-w-3xl max-h-[85vh] overflow-y-auto">
+					<DialogHeader>
+						<DialogTitle className="text-2xl border-b pb-2 flex items-center gap-2">
+							<User className="h-6 w-6" /> Candidate Details
+						</DialogTitle>
+					</DialogHeader>
+					{viewData && (
+						<div className="space-y-6 py-4">
+							<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+								<div className="space-y-4">
+									<div>
+										<p className="text-xs uppercase font-bold text-muted-foreground">
+											Personal Information
+										</p>
+										<p className="text-lg font-bold text-primary">
+											{viewData.fullName}
+										</p>
+										<p className="text-sm font-medium">{viewData.email}</p>
+										<p className="text-sm">{viewData.mobile}</p>
+									</div>
+									<div>
+										<p className="text-xs uppercase font-bold text-muted-foreground">
+											Applied For
+										</p>
+										<p className="text-base font-semibold">
+											{viewData.career?.post || "General Application"}
+										</p>
+										<p className="text-sm text-muted-foreground">
+											{viewData.career?.designation}
+										</p>
+									</div>
+									<div>
+										<p className="text-xs uppercase font-bold text-muted-foreground">
+											Application Date
+										</p>
+										<p className="text-sm">
+											{new Date(viewData.createdAt).toLocaleString()}
+										</p>
+									</div>
+								</div>
+								<div className="space-y-4">
+									<div>
+										<p className="text-xs uppercase font-bold text-muted-foreground">
+											Subject
+										</p>
+										<p className="text-sm font-semibold">
+											{viewData.subject || "N/A"}
+										</p>
+									</div>
+									<div className="p-4 bg-muted/30 rounded-lg">
+										<p className="text-xs uppercase font-bold text-muted-foreground mb-2">
+											Cover Letter / Message
+										</p>
+										<p className="text-sm leading-relaxed whitespace-pre-wrap italic">
+											{viewData.coverLetter || "No cover letter provided."}
+										</p>
+									</div>
+								</div>
+							</div>
+						</div>
+					)}
+					<DialogFooter>
+						<Button
+							onClick={() => setViewOpen(false)}
+							className="w-full md:w-auto"
+						>
+							Close
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
 		</div>
 	);
 }