doctor appointment table added

client/app/doctor/appointments/page.tsx

@@ -1,16 +1,17 @@
-import TabSection from '@/components/view/tab/AppointmentTab'
+import AppointmentTable from '@/components/view/table/DoctorAppointmentTable';
 import { Metadata } from 'next'
-import React from 'react'
 
 
-export const metadata:Metadata = {
-    title:"Appointments"
+export const metadata: Metadata = {
+  title: "Appointments"
 }
 
-const Appointments = () => {
+const Appointments = ({ searchParams }: { searchParams: { page: number } }) => {
+  const page = searchParams.page || 0;
+
   return (
-    <TabSection />
+    <AppointmentTable page={page} />
   )
 }
 
-export default Appointments
+export default Appointments

client/app/doctor/page.tsx

@@ -1,3 +1,9 @@
+import { Metadata } from "next";
+
+export const metadata:Metadata= {
+   title:"Dashboard"
+}
+
 const Dashboard = () => {
    return (
       <main className="">

client/components/skeletons/TableSkelton.tsx

@@ -48,7 +48,7 @@ export default function TableSkeleton({
                      <TableRow key={rowIndex}>
                         {columns.map((column, colIndex) => (
                            <TableCell key={colIndex}>
-                              <Skeleton className={`h-4 ${column.width || "w-full"}`} />
+                              <Skeleton className={`h-6 ${column.width || "w-full"}`} />
                            </TableCell>
                         ))}
                      </TableRow>

client/components/view/table/DoctorAppointmentTable.tsx

@@ -0,0 +1,130 @@
+'use client'
+
+import { useState, useMemo } from "react"
+import { useRouter } from "next/navigation"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { useGetAppointmentsDoctor } from "@/lib/hooks/appointment/useAppointment"
+import IAppointment, { AppointmentStatus } from "@/types"
+import TableSkeleton from "@/components/skeletons/TableSkelton"
+import Pagination from "@/components/navigation/Pagination"
+import { Button } from "@/components/ui/button"
+
+const columns = [
+  { name: "Date", width: "w-1/4" },
+  { name: "Type", width: "w-1/4" },
+  { name: "Reason", width: "w-1/4" },
+  { name: "Status", width: "w-1/4" },
+  { name: "Actions", width: "text-right pr-10" }
+]
+
+type Props = {
+  page: number
+}
+
+export default function AppointmentTable({ page }: Props) {
+  const [currentPage, setCurrentPage] = useState(page)
+  const limit = 7;
+  const { data, isLoading, error, refetch } = useGetAppointmentsDoctor(AppointmentStatus.PENDING, currentPage,limit)
+  const router = useRouter()
+
+  const appointments = useMemo(() => data?.items || [], [data])
+
+  const handlePageChange = (pageIndex: number) => {
+    setCurrentPage(pageIndex)
+    router.replace(`/doctor/appointments?page=${pageIndex}`)
+    refetch()
+  }
+
+  const handleViewDetails = (appointmentId:string)=>{
+    console.log('clicked', appointmentId);
+
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <p className="text-red-500">Error loading appointments. Please try again later.</p>
+      </div>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Appointments</CardTitle>
+        <CardDescription>
+          A list of all pending appointments including date, type, reason, and status.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <TableSkeleton
+            columns={columns}
+            rows={limit}
+            showHeader={false}
+            headerTitle="Appointments"
+            headerDescription="A list of all pending appointments including date, type, reason, and status."
+          />
+        ) : (
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  {columns.map((column) => (
+                    <TableHead key={column.name} className={column.width}>
+                      {column.name}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {appointments.length >= 1 ? (
+                  appointments.map((appointment) => (
+                    <TableRow key={appointment._id}>
+                      <TableCell>{new Date(appointment.appointmentDate!).toLocaleString().split(",")[0]}</TableCell>
+                      <TableCell>{appointment.appointmentType}</TableCell>
+                      <TableCell>{appointment.reason}</TableCell>
+                      <TableCell>
+                        <Badge variant={appointment.status === AppointmentStatus.PENDING ? "warning" : "success"}>
+                          {appointment.status}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Button
+                          variant="link" size="sm"
+                          onClick={() => handleViewDetails(appointment._id!)}
+                          aria-label={`View profile of ${appointment.reason}`}
+                        >
+                          View Details
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell colSpan={4} className="text-center">
+                      No appointments found.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+        {data && (
+          <Pagination
+            currentPage={currentPage}
+            handlePageChange={handlePageChange}
+            totalPages={data.totalPages}
+            className="mt-4"
+            hasNextPage={data.hasNextPage}
+            hasPrevPage={data.hasPreviousPage}
+          />
+        )}
+      </CardContent>
+    </Card>
+  )
+}

client/components/view/table/DoctorsTable.tsx

@@ -36,7 +36,8 @@ export default function DoctorsPage({ page, type }: Props) {
   const [isModelOpen, setModelOpen] = useState(false)
   const [tabType, setTabType] = useState<DoctorsFilter>(DoctorsFilter.VERIFIED)
   const router = useRouter()
-  const { data, isLoading, error, refetch } = useGetDoctorsAdmin(currentPage, 7, type);
+  const limit = 7
+  const { data, isLoading, error, refetch } = useGetDoctorsAdmin(currentPage, limit, type);
 
   const doctors = useMemo(() => data?.items || [], [data]);
 
@@ -89,7 +90,8 @@ export default function DoctorsPage({ page, type }: Props) {
                 {isLoading ? (
                   <TableSkeleton
                     columns={columns}
-                    rows={5}
+                    rows={limit}
+                    showHeader={false}
                     headerTitle="All Doctors"
                     headerDescription="A list of all doctors including their status, specialty, qualifications, and more."
                   />
@@ -132,8 +134,7 @@ export default function DoctorsPage({ page, type }: Props) {
                               </TableCell>
                               <TableCell className="text-right">
                                 <Button
-                                  variant="ghost"
-                                  size="sm"
+                                  variant="link" size="sm"
                                   onClick={() => handleViewProfile(doctor)}
                                   aria-label={`View profile of ${doctor.name}`}
                                 >

client/components/view/table/PatientsTable.tsx

@@ -21,7 +21,8 @@ export default function PatientsTable({ page }: Props) {
    const [isModelOpen, setModelOpen] = useState(false);
    const [selectedPatient, setSelectedPatient] = useState({});
    const router = useRouter();
-   const { data, isLoading, refetch } = useGetPatientsAdmin(currentPage, 7);
+   const limit = 7
+   const { data, isLoading, refetch } = useGetPatientsAdmin(currentPage, limit);
    const columns = [
       { name: "Image", width: "w-[80px]" },
       { name: "Name", width: "" },
@@ -50,9 +51,10 @@ export default function PatientsTable({ page }: Props) {
             {isLoading ? (
                <TableSkeleton
                   columns={columns}
+                  showHeader={false}
                   headerDescription="A list of all patients including their details."
                   headerTitle="All Patients"
-                  rows={7}
+                  rows={limit}
                />
             ) : (
                <>

client/lib/api/appointment/index.ts

@@ -44,7 +44,7 @@ export const verifyPayment = async ({ appointmentId, paymentData }: verifyPaymen
 export const getAppointmentsDoctor = async (status: AppointmentStatus,offset: number, limit: number,) => {
    const response = await withTempBaseUrl(doctorAxiosInstance, baseUrl, {
       method: 'GET',
-      url: `/doctor?status=${status}&${offset}&${limit}`,
+      url: `/doctor?status=${status}&offset=${offset}&limit=${limit}`,
    })
    return response.data;
 }

client/lib/hooks/appointment/useAppointment.ts

@@ -31,7 +31,7 @@ export const useVerifyPaymentAppointment = () => {
 
 export const useGetAppointmentsDoctor = (status: AppointmentStatus, offset: number, limit: number,) => {
     return useQuery<PaginatedResult<IAppointment>, AxiosError<ErrorResponse>>({
-        queryKey: ["appointments", status, offset, limit,],
-        queryFn: () => getAppointmentsDoctor(status, offset, limit,)
+        queryKey: ["appointments", status, offset, limit],
+        queryFn: () => getAppointmentsDoctor(status, offset, limit)
     })
 }