design page booking & add page loginverify

components/doctor/appointmentList/ItemAppointment.js

@@ -2,6 +2,7 @@ import ArrowLeftD from '@/components/icons/ArrowLeftD'
 import GreenCalendarTurn from '@/components/icons/GreenCalendarTurn'
 import { Button } from '@mui/material'
 import Image from 'next/image'
+import Link from 'next/link'
 import React from 'react'
 
 function ItemAppointment({ turn, doctor }) {
@@ -29,15 +30,17 @@ function ItemAppointment({ turn, doctor }) {
                     <GreenCalendarTurn />
                     <p className='text-[#05BA58] text-[12px] font-medium'>اولین نوبت آزاد: {turn.first_free_turn}</p>
                 </div>
-                <Button
-                    variant='contained'
-                    className='!py-2 !px-6 gap-1'
-                >
-                    دریافت نوبت
-                    <div className='w-[20px] h-[20px]'>
-                        <ArrowLeftD />
-                    </div>
-                </Button>
+                <Link href={`/booking/${turn.id}`}>
+                    <Button
+                        variant='contained'
+                        className='!py-2 !px-6 gap-1'
+                    >
+                        دریافت نوبت
+                        <div className='w-[20px] h-[20px]'>
+                            <ArrowLeftD />
+                        </div>
+                    </Button>
+                </Link>
             </div>
         </li>
     )

components/doctor/appointmentList/index.js

@@ -1,28 +1,17 @@
 'use client';
 
-import { useState } from 'react';
-
 import turns from '@/data/turns.json';
-import ModalDatePicker from './modal';
 import { Button } from '@mui/material';
 import ItemAppointment from './ItemAppointment';
 import ArrowLeftD from '@/components/icons/ArrowLeftD';
+import Link from 'next/link';
 
 function AppointmentList({ doctor }) {
 
     const itemActive = turns[0];
 
-    const [open, setOpen] = useState(true);
-
-    const handleOpen = () => setOpen(true);
-    const handleClose = () => setOpen(false);
-
     return (
         <>
-            <ModalDatePicker
-                open={open}
-                handleClose={handleClose}
-            />
             <ul className="hidden lg:flex w-[38%] flex-col justify-start items-center gap-8">
                 {turns.map(item => (
                     <ItemAppointment