feat: add pagination in appointment

frontend/src/pages/Appointment.tsx

@@ -1,7 +1,7 @@
-import {useState, useEffect, useCallback} from "react";
+import { useState, useEffect, useCallback } from "react";
 
-import {getAppointmentsApi, deleteAppointmentApi} from "@/api/appointment";
-import {exportToExcel} from "@/utils/exportToExcel";
+import { getAppointmentsApi, deleteAppointmentApi } from "@/api/appointment";
+import { exportToExcel } from "@/utils/exportToExcel";
 
 import {
 	Table,
@@ -12,12 +12,18 @@ import {
 	TableRow,
 } from "@/components/ui/table";
 
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
-import {Button} from "@/components/ui/button";
-import {Input} from "@/components/ui/input";
-
-import {Loader2, Trash, RefreshCw, Download} from "lucide-react";
+import {
+	Loader2,
+	Trash,
+	RefreshCw,
+	Download,
+	ChevronLeft,
+	ChevronRight,
+} from "lucide-react";
 
 export default function AppointmentPage() {
 	const [appointments, setAppointments] = useState<any[]>([]);
@@ -28,106 +34,153 @@ export default function AppointmentPage() {
 	const [filterDepartment, setFilterDepartment] = useState("");
 	const [filterDate, setFilterDate] = useState("");
 
+	const [currentPage, setCurrentPage] = useState(1);
+	const [itemsPerPage, setItemsPerPage] = useState(10);
+
+	const [meta, setMeta] = useState<any>({});
+
 	const fetchAll = useCallback(async () => {
 		setLoading(true);
 		try {
-			const res = await getAppointmentsApi();
+			const res = await getAppointmentsApi(
+				currentPage,
+				itemsPerPage,
+				searchText,
+				filterDoctor,
+				filterDepartment,
+				filterDate,
+			);
+
 			setAppointments(res?.data || []);
+			setMeta(res?.meta || {});
 		} catch (err) {
 			console.error(err);
 		} finally {
 			setLoading(false);
 		}
-	}, []);
+	}, [
+		currentPage,
+		itemsPerPage,
+		searchText,
+		filterDoctor,
+		filterDepartment,
+		filterDate,
+	]);
 
 	useEffect(() => {
 		fetchAll();
 	}, [fetchAll]);
 
-	const filteredAppointments = appointments.filter((item) => {
-		const matchesSearch =
-			item.name?.toLowerCase().includes(searchText.toLowerCase()) ||
-			item.mobileNumber?.includes(searchText) ||
-			item.email?.toLowerCase().includes(searchText.toLowerCase());
-
-		const matchesDoctor = filterDoctor
-			? item.doctor?.name?.toLowerCase().includes(filterDoctor.toLowerCase())
-			: true;
-
-		const matchesDepartment = filterDepartment
-			? item.department?.name
-					?.toLowerCase()
-					.includes(filterDepartment.toLowerCase())
-			: true;
-
-		const matchesDate = filterDate
-			? new Date(item.date).toISOString().split("T")[0] === filterDate
-			: true;
-
-		return matchesSearch && matchesDoctor && matchesDepartment && matchesDate;
-	});
-
 	async function handleDelete(id: number) {
 		if (!confirm("Delete appointment?")) return;
 		await deleteAppointmentApi(id);
 		fetchAll();
 	}
 
-	const handleExport = () => {
-		const exportData = filteredAppointments.map((item) => ({
-			ID: item.id,
-			Name: item.name,
-			Phone: item.mobileNumber,
-			Email: item.email,
-			Doctor: item.doctor?.name,
-			Department: item.department?.name,
-			Date: new Date(item.date).toLocaleDateString(),
-			Message: item.message,
-		}));
+	const handleExport = async () => {
+		try {
+			const res = await getAppointmentsApi();
 
-		exportToExcel(exportData, "appointments");
+			let data = res?.data || [];
+
+			data = data.filter((item: any) => {
+				const matchesSearch =
+					item.name?.toLowerCase().includes(searchText.toLowerCase()) ||
+					item.mobileNumber?.includes(searchText) ||
+					item.email?.toLowerCase().includes(searchText.toLowerCase());
+
+				const matchesDoctor = filterDoctor
+					? item.doctor?.name
+							?.toLowerCase()
+							.includes(filterDoctor.toLowerCase())
+					: true;
+
+				const matchesDepartment = filterDepartment
+					? item.department?.name
+							?.toLowerCase()
+							.includes(filterDepartment.toLowerCase())
+					: true;
+
+				const matchesDate = filterDate
+					? new Date(item.date).toISOString().split("T")[0] === filterDate
+					: true;
+
+				return (
+					matchesSearch && matchesDoctor && matchesDepartment && matchesDate
+				);
+			});
+
+			const exportData = data.map((item: any) => ({
+				ID: item.id,
+				Name: item.name,
+				Phone: item.mobileNumber,
+				Email: item.email,
+				Doctor: item.doctor?.name,
+				Department: item.department?.name,
+				Date: new Date(item.date).toLocaleDateString(),
+				Message: item.message,
+			}));
+
+			exportToExcel(exportData, "appointments");
+		} catch (err) {
+			console.error(err);
+		}
 	};
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex justify-between items-center gap-3 flex-wrap">
+			<div className="flex justify-between items-center flex-wrap gap-3">
 				<h1 className="text-2xl font-bold">Appointments</h1>
 
-				<div className="flex flex-wrap gap-2">
+				<div className="flex flex-wrap gap-2 items-center">
 					<Input
-						placeholder="Search name / phone / email..."
+						placeholder="Search..."
 						value={searchText}
-						onChange={(e) => setSearchText(e.target.value)}
-						className="w-[220px]"
+						onChange={(e) => {
+							setSearchText(e.target.value);
+							setCurrentPage(1);
+						}}
+						className="w-[200px]"
 					/>
 
 					<Input
-						placeholder="Filter Doctor"
+						placeholder="Doctor"
 						value={filterDoctor}
 						onChange={(e) => setFilterDoctor(e.target.value)}
-						className="w-[180px]"
+						className="w-[160px]"
 					/>
 
 					<Input
-						placeholder="Filter Department"
+						placeholder="Department"
 						value={filterDepartment}
 						onChange={(e) => setFilterDepartment(e.target.value)}
-						className="w-[200px]"
+						className="w-[160px]"
 					/>
 
 					<Input
 						type="date"
 						value={filterDate}
 						onChange={(e) => setFilterDate(e.target.value)}
-						className="w-[180px]"
+						className="w-[160px]"
 					/>
 
-					<Button variant="outline" onClick={fetchAll} disabled={loading}>
+					<select
+						value={itemsPerPage}
+						onChange={(e) => {
+							setItemsPerPage(Number(e.target.value));
+							setCurrentPage(1);
+						}}
+						className="border px-2 py-1 rounded">
+						<option value={5}>5</option>
+						<option value={10}>10</option>
+						<option value={20}>20</option>
+					</select>
+
+					<Button onClick={fetchAll}>
 						<RefreshCw className="mr-2 h-4 w-4" />
-						Refresh
 					</Button>
 
-					<Button variant="outline" onClick={handleExport}>
+					<Button onClick={handleExport}>
 						<Download className="mr-2 h-4 w-4" />
 						Export
 					</Button>
@@ -140,74 +193,77 @@ export default function AppointmentPage() {
 				</CardHeader>
 
 				<CardContent>
-					<div className="overflow-x-auto">
-						<Table className="min-w-[700px]">
-							<TableHeader>
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>ID</TableHead>
+								<TableHead>Name</TableHead>
+								<TableHead>Phone</TableHead>
+								<TableHead>Doctor</TableHead>
+								<TableHead>Department</TableHead>
+								<TableHead>Date</TableHead>
+								<TableHead>Actions</TableHead>
+							</TableRow>
+						</TableHeader>
+
+						<TableBody>
+							{loading ? (
 								<TableRow>
-									<TableHead>ID</TableHead>
-									<TableHead>Name</TableHead>
-									<TableHead>Phone</TableHead>
-									<TableHead>Email</TableHead>
-									<TableHead>Doctor</TableHead>
-									<TableHead>Department</TableHead>
-									<TableHead>Appointment Date</TableHead>
-									<TableHead>Message</TableHead>
-									<TableHead>Generated on</TableHead>
-
-									<TableHead>Actions</TableHead>
+									<TableCell colSpan={7} className="text-center">
+										<Loader2 className="animate-spin mx-auto" />
+									</TableCell>
 								</TableRow>
-							</TableHeader>
-
-							<TableBody>
-								{loading ? (
-									<TableRow>
-										<TableCell colSpan={9} className="text-center">
-											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
+							) : appointments.length === 0 ? (
+								<TableRow>
+									<TableCell
+										colSpan={7}
+										className="text-center py-6 text-gray-500">
+										No appointments found
+									</TableCell>
+								</TableRow>
+							) : (
+								appointments.map((item) => (
+									<TableRow key={item.id}>
+										<TableCell>{item.id}</TableCell>
+										<TableCell>{item.name}</TableCell>
+										<TableCell>{item.mobileNumber}</TableCell>
+										<TableCell>{item.doctor?.name}</TableCell>
+										<TableCell>{item.department?.name}</TableCell>
+										<TableCell>
+											{new Date(item.date).toLocaleDateString()}
+										</TableCell>
+										<TableCell>
+											<Button
+												size="sm"
+												variant="destructive"
+												onClick={() => handleDelete(item.id)}>
+												<Trash className="h-4 w-4" />
+											</Button>
 										</TableCell>
 									</TableRow>
-								) : filteredAppointments.length === 0 ? (
-									<TableRow>
-										<TableCell colSpan={9} className="text-center">
-											No appointments found
-										</TableCell>
-									</TableRow>
-								) : (
-									filteredAppointments.map((item) => (
-										<TableRow key={item.id}>
-											<TableCell>{item.id}</TableCell>
-											<TableCell>{item.name}</TableCell>
-											<TableCell>{item.mobileNumber}</TableCell>
-											<TableCell>{item.email}</TableCell>
-											<TableCell>{item.doctor?.name}</TableCell>
-											<TableCell>{item.department?.name}</TableCell>
+								))
+							)}
+						</TableBody>
+					</Table>
 
-											{/* ✅ DATE ONLY */}
-											<TableCell>
-												{new Date(item.date).toLocaleDateString()}
-											</TableCell>
+					<div className="flex justify-between mt-4">
+						<p>
+							Page {meta.page || 1} of {meta.totalPages || 1}
+						</p>
 
-											<TableCell className="max-w-[250px] whitespace-normal">
-												{item.message}
-											</TableCell>
-											<TableCell>
-												{" "}
-												{new Date(item.createdAt).toLocaleDateString()}
-											</TableCell>
+						<div className="flex gap-2">
+							<Button
+								disabled={currentPage === 1}
+								onClick={() => setCurrentPage((p) => p - 1)}>
+								<ChevronLeft />
+							</Button>
 
-											<TableCell>
-												<Button
-													size="sm"
-													variant="destructive"
-													onClick={() => handleDelete(item.id)}
-												>
-													<Trash className="h-4 w-4" />
-												</Button>
-											</TableCell>
-										</TableRow>
-									))
-								)}
-							</TableBody>
-						</Table>
+							<Button
+								disabled={currentPage === meta.totalPages}
+								onClick={() => setCurrentPage((p) => p + 1)}>
+								<ChevronRight />
+							</Button>
+						</div>
 					</div>
 				</CardContent>
 			</Card>