refactor: pass doctorSlug prop to AppointmentList and ItemAppointment components

components/doctor/appointmentList/ItemAppointment.js

@@ -6,7 +6,7 @@ import { Button } from "@mui/material";
 import Image from "next/image";
 import Link from "next/link";
 
-function ItemAppointment({ turn, loading }) {
+function ItemAppointment({ turn, loading, doctorSlug }) {
   return (
     <li
       key={turn.id}
@@ -50,7 +50,7 @@ function ItemAppointment({ turn, loading }) {
             </p>
           </TextLoading>
         </div>
-        <Link href={loading ? "#" : `/appointment/${turn.id}`}>
+        <Link href={loading ? "#" : `/appointment/${doctorSlug}`}>
           <Button
             variant="contained"
             className="!py-2 !px-3 xl:!px-6 gap-1"