Admin Page scheduled or cancelled appointment

app/admin/page.tsx

@@ -1,4 +1,4 @@
-import { columns, Payment } from "@/components/table/columns";
+import { columns } from "@/components/table/columns";
 import { DataTable } from "@/components/table/DataTable";
 import StatCard from "@/components/ui/StatCard";
 import { getRecentAppointmentList } from "@/lib/actions/appointment.actions";

app/patients/[userId]/new-appointment/success/page.tsx

@@ -68,7 +68,7 @@ const SuccessPage = async ({
         </section>
 
         <Button variant={"outline"} className='shad-primary-btn' asChild>
-          <Link href={`/patient/${userId}/new-appointment`}>
+          <Link href={`/patients/${userId}/new-appointment`}>
             New Appointment
           </Link>
         </Button>

components/AppointmentModal.tsx

@@ -22,7 +22,7 @@ const AppointmentModal = ({
   type: "schedule" | "cancel";
   patientId: string;
   userId: string;
-  appointment: Appointment;
+  appointment?: Appointment;
 }) => {
   const [open, setOpen] = useState(false);
 
@@ -44,7 +44,13 @@ const AppointmentModal = ({
           </DialogDescription>
         </DialogHeader>
 
-        <AppointmentForm />
+        <AppointmentForm
+          userId={userId}
+          patientId={patientId}
+          type={type}
+          appointment={appointment}
+          setOpen={setOpen}
+        />
       </DialogContent>
     </Dialog>
   );

components/forms/AppointmentForm.tsx

@@ -6,40 +6,48 @@ import { z } from "zod";
 
 import { Form } from "@/components/ui/form";
 import { Doctors } from "@/constants";
-import { createAppointment } from "@/lib/actions/appointment.actions";
+import {
+  createAppointment,
+  updateAppointment,
+} from "@/lib/actions/appointment.actions";
 import { getAppointmentSchema } from "@/lib/validation";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import CustomFormField from "../CustomFormField";
 import SubmitButton from "../SubmitButton";
 import { SelectItem } from "../ui/select";
 import { FormFieldType } from "./PatientForm";
+import { Appointment } from "@/types/appwrite.types";
 
 export default function AppointmentForm({
   userId,
   patientId,
-  type,
+  type = "create",
+  appointment,
+  setOpen,
 }: {
   userId: string;
   patientId: string;
   type: "create" | "cancel" | "schedule";
+  appointment?: Appointment;
+  setOpen?: Dispatch<SetStateAction<boolean>>;
 }) {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  console.log(patientId);
-
   const AppointmentFormValidation = getAppointmentSchema(type);
 
   const form = useForm<z.infer<typeof AppointmentFormValidation>>({
     resolver: zodResolver(AppointmentFormValidation),
     defaultValues: {
-      primaryPhysician: "",
-      schedule: new Date(),
-      reason: "",
-      note: "",
-      cancellationReason: "",
+      primaryPhysician: appointment ? appointment.primaryPhysician : "",
+      schedule: appointment
+        ? new Date(appointment.schedule)
+        : new Date(Date.now()),
+      reason: appointment ? appointment.reason : "",
+      note: appointment ? appointment.note : "",
+      cancellationReason: appointment?.cancellationReason || "",
     },
   });
 
@@ -52,9 +60,9 @@ export default function AppointmentForm({
         break;
       case "cancel":
         status = "cancelled";
+        break;
       default:
         status = "pending";
-        break;
     }
     try {
       if (type === "create" && patientId) {
@@ -75,12 +83,30 @@ export default function AppointmentForm({
             `/patients/${userId}/new-appointment/success?appointmentId=${appointment.$id}`
           );
         }
+      } else {
+        const appointmentToUpdate = {
+          userId,
+          appointmentId: appointment?.$id!,
+          appointment: {
+            primaryPhysician: values.primaryPhysician,
+            schedule: new Date(values.schedule),
+            status: status as Status,
+            cancellationReason: values.cancellationReason,
+          },
+          type,
+        };
+
+        const updatedAppointment = await updateAppointment(appointmentToUpdate);
+
+        if (updatedAppointment) {
+          setOpen && setOpen(false);
+          form.reset();
+        }
       }
     } catch (error) {
       console.error(error);
-    } finally {
-      setIsLoading(false);
     }
+    setIsLoading(false);
   }
 
   let buttonLabel;
@@ -102,12 +128,14 @@ export default function AppointmentForm({
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-8'>
-        <section className='mb-12 space-y-4'>
-          <h1 className='header'>New Appointment</h1>
-          <p className='text-dark-700'>
-            Request a new appointment in 10 seconds
-          </p>
-        </section>
+        {type === "create" && (
+          <section className='mb-12 space-y-4'>
+            <h1 className='header'>New Appointment</h1>
+            <p className='text-dark-700'>
+              Request a new appointment in 10 seconds
+            </p>
+          </section>
+        )}
 
         {type !== "cancel" && (
           <>

components/table/DataTable.tsx

@@ -17,6 +17,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { Button } from "../ui/button";
+import Image from "next/image";
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -35,11 +36,11 @@ export function DataTable<TData, TValue>({
   });
 
   return (
-    <div className='rounded-md border'>
-      <Table>
-        <TableHeader>
+    <div className='data-table'>
+      <Table className='shad-table'>
+        <TableHeader className='bg-dark-200'>
           {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id}>
+            <TableRow key={headerGroup.id} className='shad-table-row-header'>
               {headerGroup.headers.map((header) => {
                 return (
                   <TableHead key={header.id}>
@@ -61,6 +62,7 @@ export function DataTable<TData, TValue>({
               <TableRow
                 key={row.id}
                 data-state={row.getIsSelected() && "selected"}
+                className='shad-table-row'
               >
                 {row.getVisibleCells().map((cell) => (
                   <TableCell key={cell.id}>
@@ -79,22 +81,35 @@ export function DataTable<TData, TValue>({
         </TableBody>
       </Table>
 
-      <div className='flex items-center justify-end space-x-2 py-4'>
+      <div className='table-actions'>
         <Button
           variant='outline'
           size='sm'
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
+          className='shad-gray-btn'
         >
-          Previous
+          <Image
+            src={"/assets/icons/arrow.svg"}
+            width={24}
+            height={24}
+            alt='arrow'
+          />
         </Button>
         <Button
           variant='outline'
           size='sm'
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
+          className='shad-gray-btn'
         >
-          Next
+          <Image
+            src={"/assets/icons/arrow.svg"}
+            width={24}
+            height={24}
+            alt='arrow'
+            className='rotate-180'
+          />
         </Button>
       </div>
     </div>

components/table/columns.tsx

@@ -1,33 +1,15 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { MoreHorizontal } from "lucide-react";
 
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import StatusBadge from "../StatusBadge";
-import { formatDateTime } from "@/lib/utils";
 import { Doctors } from "@/constants";
+import { formatDateTime } from "@/lib/utils";
 import Image from "next/image";
 import AppointmentModal from "../AppointmentModal";
+import StatusBadge from "../StatusBadge";
+import { Appointment } from "@/types/appwrite.types";
 
-// This type is used to define the shape of our data.
-// You can use a Zod schema here if you want.
-export type Payment = {
-  id: string;
-  amount: number;
-  status: "pending" | "processing" | "success" | "failed";
-  email: string;
-};
-
-export const columns: ColumnDef<Payment>[] = [
+export const columns: ColumnDef<Appointment>[] = [
   {
     header: "ID",
     cell: ({ row }) => <p className='text-14-medium'>{row.index + 1}</p>,
@@ -68,8 +50,8 @@ export const columns: ColumnDef<Payment>[] = [
       return (
         <div className='flex items-center gap-3'>
           <Image
-            src={doctor?.image}
-            alt={doctor.name}
+            src={doctor?.image!}
+            alt={doctor?.name!}
             width={100}
             height={100}
             className='size-8'

lib/actions/appointment.actions.ts

@@ -8,6 +8,7 @@ import {
 } from "../appwrite.config";
 import { parseStringify } from "../utils";
 import { Appointment } from "@/types/appwrite.types";
+import { revalidatePath } from "next/cache";
 
 export const createAppointment = async (
   appointment: CreateAppointmentParams
@@ -80,3 +81,34 @@ export const getRecentAppointmentList = async () => {
     console.log(error);
   }
 };
+
+export const updateAppointment = async ({
+  appointmentId,
+  userId,
+  appointment,
+  type,
+}: UpdateAppointmentParams) => {
+  try {
+    console.log("AAA");
+
+    const updatedAppointment = await databases.updateDocument(
+      DATABASE_ID!,
+      APPOINTMENT_COLLECTION_ID!,
+      appointmentId,
+      appointment
+    );
+
+    console.log(updatedAppointment);
+
+    if (!updatedAppointment) {
+      throw new Error("Appointment not found");
+    }
+
+    //SMS Notification
+
+    revalidatePath("/admin");
+    return parseStringify(updatedAppointment);
+  } catch (error) {
+    console.error("An error occurred while scheduling an appointment: ", error);
+  }
+};