doctors page pagination added

client/app/admin/doctors/page.tsx

@@ -5,8 +5,11 @@ export const metadata: Metadata = {
    title: "Doctors",
 };
 
-const DoctorsPage = () => {
-   return <DoctorTable />;
+
+const Page = ({ searchParams }: { searchParams: { page: number } }) => {
+   const page = searchParams.page || 0;
+
+   return <DoctorTable page={page} />;
 };
 
-export default DoctorsPage;
+export default Page;

client/app/admin/patients/page.tsx

@@ -7,7 +7,7 @@ export const metadata: Metadata = {
 };
 
 const Page = ({ searchParams }: { searchParams: { page: number } }) => {
-   const page = searchParams.page || 1;
+   const page = searchParams.page || 0;
 
    return (
       <main>
@@ -16,4 +16,4 @@ const Page = ({ searchParams }: { searchParams: { page: number } }) => {
    );
 };
 
-export default Page;
+export default Page;

client/components/navigation/Pagination.tsx

@@ -1,5 +1,5 @@
 import {
-   Pagination,
+   Pagination as PaginationSection,
    PaginationContent,
    PaginationEllipsis,
    PaginationItem,
@@ -17,7 +17,7 @@ type Props = {
    hasNextPage: boolean;
 };
 
-export default function PaginationComponent({ currentPage, handlePageChange, totalPages, className, hasNextPage, hasPrevPage }: Props) {
+export default function Pagination({ currentPage, handlePageChange, totalPages, className, hasNextPage, hasPrevPage }: Props) {
    if (totalPages <= 1) return null;
 
    const getPageRange = () => {
@@ -40,7 +40,7 @@ export default function PaginationComponent({ currentPage, handlePageChange, tot
    };
 
    return (
-      <Pagination className={className}>
+      <PaginationSection className={className}>
          <PaginationContent>
             <PaginationItem>
                <PaginationPrevious
@@ -72,6 +72,6 @@ export default function PaginationComponent({ currentPage, handlePageChange, tot
                />
             </PaginationItem>
          </PaginationContent>
-      </Pagination>
+      </PaginationSection>
    );
 }

client/components/table/DoctorsTable.tsx

@@ -11,6 +11,8 @@ import TableSkeleton from "@/components/skeletons/TableSkelton";
 import AdminDoctorProfileModel from "../models/admin/DoctorProfileModel";
 import { useState } from "react";
 import { IDoctor } from "@/types";
+import Pagination from "../navigation/Pagination";
+import { useRouter } from "next/navigation";
 
 const columns = [
    { name: "Image", width: "w-[80px]" },
@@ -21,17 +23,29 @@ const columns = [
    { name: "Actions", width: "w-1/6 text-right pr-10" },
 ];
 
-export default function DoctorsPage() {
-   const { data, isLoading, refetch } = useGetDoctorsAdmin(0, 10);
-   const [isModelOpen, setModelOpen] = useState(false);
+type Props = {
+   page: number;
+}
+
+export default function DoctorsPage({ page }: Props) {
+   let [currentPage, setCurrentPage] = useState(page);
    const [selectedDoctor, setSelectedDoctor] = useState({});
+   const [isModelOpen, setModelOpen] = useState(false);
+   const router = useRouter();
+   const { data, isLoading, refetch } = useGetDoctorsAdmin(currentPage, 7);
    const doctors = data?.items || [];
 
    const handleViewProfile = (doctor: IDoctor) => {
       setSelectedDoctor(doctor);
       setModelOpen(true);
    };
 
+   const handlePageChange = (pageIndex: number) => {
+      setCurrentPage(pageIndex);
+      router.push(`/admin/doctors?page=${pageIndex}`);
+      refetch();
+   };
+
    return (
       <main className="flex-1 space-y-4 p-4 md:p-6">
          <div className="flex min-h-screen w-full flex-col bg-background">
@@ -106,6 +120,14 @@ export default function DoctorsPage() {
                         </TableBody>
                      </Table>
                   </CardContent>
+                  <Pagination
+                     currentPage={currentPage}
+                     handlePageChange={handlePageChange}
+                     totalPages={data?.totalPages!}
+                     className="mt-11"
+                     hasNextPage={data?.hasNextPage!}
+                     hasPrevPage={data?.hasPreviousPage!}
+                  />
                   <AdminDoctorProfileModel
                      open={isModelOpen}
                      setOpen={setModelOpen}

client/components/table/PatientsTable.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { useGetPatientsAdmin } from "@/lib/hooks/admin/useAdminPatients";
-import PaginationComponent from "@/components/navigation/Pagination";
+import Pagination from "@/components/navigation/Pagination";
 import { IPatient } from "@/types";
 import AdminPatientProfileModel from "@/components/models/admin/PatientProfileModel";
 import { useRouter } from "next/navigation";
@@ -18,11 +18,10 @@ type Props = {
 
 export default function PatientsTable({ page }: Props) {
    const [currentPage, setCurrentPage] = useState(page);
-   const itemsPerPage = 7;
    const [isModelOpen, setModelOpen] = useState(false);
    const [selectedPatient, setSelectedPatient] = useState({});
    const router = useRouter();
-   const { data, isLoading, refetch } = useGetPatientsAdmin(currentPage-1, itemsPerPage);
+   const { data, isLoading, refetch } = useGetPatientsAdmin(currentPage, 7);
    const columns = [
       { name: "Image", width: "w-[80px]" },
       { name: "Name", width: "" },
@@ -108,7 +107,7 @@ export default function PatientsTable({ page }: Props) {
                         </Table>
                      </CardContent>
                   </Card>
-                  <PaginationComponent
+                  <Pagination
                      currentPage={currentPage}
                      handlePageChange={handlePageChange}
                      totalPages={data?.totalPages!}