-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
35 changed files
with
312 additions
and
314 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,95 +1,98 @@ | ||
| "use client"; | ||
| 'use client' | ||
|
|
||
| import Pagination from "@/components/navigation/Pagination"; | ||
| import { useGetAppointmentsPatient } from "@/lib/hooks/appointment/useAppointmentPatient"; | ||
| import GetStatusBadge from "@/components/page-components/doctor/appointment/GetStatusBadge"; | ||
| import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"; | ||
| import { ButtonV2 } from "@/components/common/ButtonV2"; | ||
| import { useRouter } from "next/navigation"; | ||
| import { format } from "date-fns"; | ||
| import { Calendar, FileText, Video, User } from "lucide-react"; | ||
| import { useState } from "react"; | ||
| import { useState } from "react" | ||
| import { useRouter } from "next/navigation" | ||
| import { format } from "date-fns" | ||
| import { FileText, Video, User } from "lucide-react" | ||
| import { useGetAppointmentsPatient } from "@/lib/hooks/appointment/useAppointmentPatient" | ||
| import Pagination from "@/components/navigation/Pagination" | ||
| import GetStatusBadge from "@/components/page-components/doctor/appointment/GetStatusBadge" | ||
| import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" | ||
| import { Skeleton } from "@/components/ui/skeleton" | ||
| import { ButtonV2 } from "@/components/button/ButtonV2" | ||
|
|
||
| const AppointmentsPageSection = ({ searchParams }: { searchParams: { page: number } }) => { | ||
| const page = searchParams.page || 1; | ||
| const [currentPage, setCurrentPage] = useState(page); | ||
| const { data, isLoading } = useGetAppointmentsPatient(page-1, 4); | ||
| const router = useRouter(); | ||
| export default function AppointmentsPageSection({ searchParams }: { searchParams: { page: number } }) { | ||
| const page = searchParams.page || 1 | ||
| const [currentPage, setCurrentPage] = useState(page) | ||
| const { data, isLoading } = useGetAppointmentsPatient(page - 1, 4) | ||
| const router = useRouter() | ||
|
|
||
| const handlePageChange = (pageIndex: number) => { | ||
| if (pageIndex > data?.totalPages! || pageIndex < 1) return null; | ||
| router.replace(`/appointments?page=${pageIndex}`); | ||
| setCurrentPage(pageIndex); | ||
| }; | ||
| const handlePageChange = (pageIndex: number) => { | ||
| if (pageIndex > data?.totalPages! || pageIndex < 1) return null | ||
| router.replace(`/appointments?page=${pageIndex}`) | ||
| setCurrentPage(pageIndex) | ||
| } | ||
|
|
||
| const handleViewDetails = (appointmentId: string) => { | ||
| router.push(`/appointments/${appointmentId}`); | ||
| }; | ||
| const handleViewDetails = (appointmentId: string) => { | ||
| router.push(`/appointments/${appointmentId}`) | ||
| } | ||
|
|
||
| return ( | ||
| <div className="min-h-screen p-4 sm:p-6 md:p-8"> | ||
| <div className="max-w-4xl mx-auto space-y-4"> | ||
| <h1 className="text-3xl font-bold text-green-400 mb-6">My Appointments</h1> | ||
|
|
||
| {data?.items.map((appointment) => ( | ||
| <Card | ||
| key={appointment._id} | ||
| className="mb-4 bg-dark-400 border-gray-400 shadow-md hover:shadow-lg transition-shadow duration-300" | ||
| > | ||
| <CardHeader className="py-3 px-4 bg-gray-750 border-b border-gray-700"> | ||
| <CardTitle className="flex justify-between items-center text-base"> | ||
| <div className="flex items-center space-x-2"> | ||
| <Calendar className="w-4 h-4 text-green-400" /> | ||
| <span className="text-gray-100"> | ||
| {format(new Date(appointment.appointmentDate!), "dd/MM/yy")} | ||
| </span> | ||
| </div> | ||
| <GetStatusBadge status={appointment.status!} /> | ||
| </CardTitle> | ||
| </CardHeader> | ||
| <CardContent className="py-3 px-4"> | ||
| <div className="grid grid-cols-2 gap-2 text-sm"> | ||
| <div className="flex items-center space-x-2"> | ||
| {appointment.appointmentType === "video-consulting" ? ( | ||
| <Video className="w-4 h-4 text-blue-400" /> | ||
| ) : ( | ||
| <User className="w-4 h-4 text-blue-400" /> | ||
| )} | ||
| <p className="text-gray-300">{appointment.appointmentType}</p> | ||
| </div> | ||
| <div className="flex items-center space-x-2"> | ||
| <FileText className="w-4 h-4 text-blue-400" /> | ||
| <p className="text-gray-300 truncate">{appointment.reason}</p> | ||
| </div> | ||
| </div> | ||
| </CardContent> | ||
| <CardFooter className="py-2 px-4 bg-gray-750 border-t border-gray-700 flex justify-end"> | ||
| <ButtonV2 | ||
| variant="gooeyRight" | ||
| size="sm" | ||
| onClick={() => handleViewDetails(appointment._id!)} | ||
| className="text-green-400 border-green-500" | ||
| > | ||
| View Details | ||
| </ButtonV2> | ||
| </CardFooter> | ||
| </Card> | ||
| ))} | ||
|
|
||
| <div className="mt-6"> | ||
| {!isLoading && ( | ||
| <Pagination | ||
| currentPage={currentPage} | ||
| handlePageChange={handlePageChange} | ||
| hasNextPage={data?.hasNextPage!} | ||
| hasPrevPage={data?.hasPreviousPage!} | ||
| totalPages={data?.totalPages!} | ||
| /> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default AppointmentsPageSection; | ||
| return ( | ||
| <div className="container mx-auto py-10"> | ||
| <h1 className="text-4xl font-bold mb-8 text-primary">My Appointments</h1> | ||
| {isLoading ? ( | ||
| <div className="space-y-4"> | ||
| {[...Array(4)].map((_, index) => ( | ||
| <Card key={index} className="bg-card"> | ||
| <CardHeader> | ||
| <Skeleton className="h-6 w-1/3" /> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <Skeleton className="h-4 w-full mb-2" /> | ||
| <Skeleton className="h-4 w-2/3" /> | ||
| </CardContent> | ||
| <CardFooter> | ||
| <Skeleton className="h-10 w-28" /> | ||
| </CardFooter> | ||
| </Card> | ||
| ))} | ||
| </div> | ||
| ) : ( | ||
| <div className="space-y-6"> | ||
| {data?.items.map((appointment) => ( | ||
| <Card key={appointment._id} className="bg-card hover:shadow-lg transition-shadow duration-300"> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> | ||
| <CardTitle className="text-lg font-medium"> | ||
| Appointment on {format(new Date(appointment.appointmentDate!), "MMMM d, yyyy")} | ||
| </CardTitle> | ||
| <GetStatusBadge status={appointment.status!} /> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <div className="grid grid-cols-2 gap-4"> | ||
| <div className="flex items-center space-x-2"> | ||
| {appointment.appointmentType === "video-consulting" ? ( | ||
| <Video className="h-4 w-4 text-primary" /> | ||
| ) : ( | ||
| <User className="h-4 w-4 text-primary" /> | ||
| )} | ||
| <span className="text-sm text-muted-foreground capitalize">{appointment.appointmentType}</span> | ||
| </div> | ||
| <div className="flex items-center space-x-2 col-span-2"> | ||
| <FileText className="h-4 w-4 text-primary" /> | ||
| <span className="text-sm text-muted-foreground truncate">{appointment.reason}</span> | ||
| </div> | ||
| </div> | ||
| </CardContent> | ||
| <CardFooter> | ||
| <ButtonV2 onClick={() => handleViewDetails(appointment._id!)} variant="ringHover" className="w-full"> | ||
| View Details | ||
| </ButtonV2> | ||
| </CardFooter> | ||
| </Card> | ||
| ))} | ||
| </div> | ||
| )} | ||
| {!isLoading && ( | ||
| <div className="mt-8"> | ||
| <Pagination | ||
| currentPage={currentPage} | ||
| handlePageChange={handlePageChange} | ||
| hasNextPage={data?.hasNextPage!} | ||
| hasPrevPage={data?.hasPreviousPage!} | ||
| totalPages={data?.totalPages!} | ||
| /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
5e6d2efThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
avm-care – ./
avm-care-sinans-projects-8d312afe.vercel.app
avm-care.vercel.app
avm-care-git-main-sinans-projects-8d312afe.vercel.app