responsive page user-account & add-doctor & turns & add loading to all page panel & change design page dashboard

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "window.zoomLevel": -1.5
+}

app/panel/(layout)/dashboard/page.js

@@ -1,3 +1,5 @@
+'use client';
+
 import DashboardPage from "@/components/panel/dashboard";
 import Information from '@/data/information.json';
 

app/panel/(layout)/layout.js

@@ -1,24 +1,46 @@
 'use client';
 
+import { useEffect, useState } from "react";
 import Header from "@/components/layoutPanel/header";
 import Sidebar from "@/components/layoutPanel/sidebar";
 import Information from '@/data/information.json';
 import UserDetail from "@/components/layoutPanel/userDetail";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import BgGray from "@/components/layoutPanel/sidebar/BgGray";
 
 function LayoutPanel({ children }) {
 
     const pathname = usePathname();
     const [active, setActive] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    }, []);
+
 
     return (
         <div className="flex min-h-screen">
             <Sidebar
+                open={open}
                 active={active}
+                setOpen={setOpen}
                 setActive={setActive}
             />
-            <main className="w-full">
+            <BgGray isActive={active} setIsActive={setActive} />
+            <main className={`
+                w-full transition-all duration-500
+                ${pathname.includes('dashboard') ?
+                    (open ?
+                        'md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]' :
+                        'md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]'
+                    ) : (open ?
+                        'md:w-[calc(100%-243px)]' :
+                        'md:w-[calc(100%-96px)]')}
+            `}>
                 <Header
                     data={Information}
                     setActive={setActive}
@@ -29,7 +51,7 @@ function LayoutPanel({ children }) {
                 </section>
             </main>
             {pathname.includes('dashboard') && (
-                <UserDetail data={Information} />
+                <UserDetail data={Information} loading={loading} />
             )}
         </div>
     )

components/dashboard/index.js

@@ -9,6 +9,7 @@ function DashboardPage({ user, isTurnsDetails, setIsTurnsDetails, children, valu
             name='dashboard'
             isSidebar={true}
             setValue={setValue}
+            disableFooter={true}
             isOpenSide={isOpenSide}
             setIsOpenSide={setIsOpenSide}
             isTurnsDetails={isTurnsDetails}

components/dashboard/userAccount/tabs/comments/Comment.js

@@ -7,7 +7,7 @@ import TextLoading from "@/app/component/loading/Text"
 import CustomLoading from "@/app/component/loading/Custom"
 import MultilineLoading from "@/app/component/loading/Multiline"
 
-function Comment({ data, loading }) {
+function Comment({ data, loading, idx, length }) {
     return (
         <li className="flex flex-col gap-[8px] w-full">
             <div className="flex items-start justify-between w-full">
@@ -57,7 +57,9 @@ function Comment({ data, loading }) {
                     <p className="text-[#7E7E7E] text-[12px] font-normal">{data.date}</p>
                 </TextLoading>
             </div>
-            <span className="w-full block h-px bg-[#EFEFEF] mt-0 md:mt-[4px] mt-[8px]"></span>
+            {length > idx + 1 && (
+                <span className="w-full block h-px bg-[#EFEFEF] mt-0 md:mt-[4px] lg:mt-[8px]"></span>
+            )}
         </li>
     )
 }

components/dashboard/userAccount/tabs/comments/index.js

@@ -6,8 +6,10 @@ function Comments({ user, loading }) {
             {user.comments.map((item, idx) => (
                 <Comment
                     key={idx}
+                    idx={idx}
                     data={item}
                     loading={loading}
+                    length={user.comments.length}
                 />
             ))}
         </ul>

components/dashboard/userAccount/tabs/messages/Message.js

@@ -4,7 +4,7 @@ import CalndarD from '@/components/icons/CalndarD'
 import MessageNotifd from '@/components/icons/MessageNotifD'
 import React from 'react'
 
-function Message({ data, loading }) {
+function Message({ data, loading, length, idx }) {
     return (
         <li>
             <div className="flex items-center justify-start gap-[8px]">
@@ -28,7 +28,9 @@ function Message({ data, loading }) {
                     </TextLoading>
                 </div>
             </div>
-            <span className='block bg-[#EFEFEF] h-px w-full mt-[12px]'></span>
+            {length > idx + 1 && (
+                <span className='block bg-[#EFEFEF] h-px w-full mt-[12px]'></span>
+            )}
         </li>
     )
 }

components/dashboard/userAccount/tabs/messages/index.js

@@ -6,8 +6,10 @@ function Messages({ user, loading }) {
             {user.messages.map((item, idx) => (
                 <Message
                     key={idx}
+                    idx={idx}
                     data={item}
                     loading={loading}
+                    length={user.messages.length}
                 />
             ))}
         </ul>

components/icons/ArrowLeftPH.js

@@ -0,0 +1,9 @@
+function ArrowLeftPH({ active }) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M14.9973 19.9201L8.47728 13.4001C7.70728 12.6301 7.70728 11.3701 8.47728 10.6001L14.9973 4.08008" stroke={active ? '#5559CE' : '#616161'} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+    )
+}
+
+export default ArrowLeftPH

components/icons/ArrowRightPH.js

@@ -0,0 +1,10 @@
+function ArrowRightPH() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M14.4299 5.92969L20.4999 11.9997L14.4299 18.0697" stroke="#525252" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M3.5 12H20.33" stroke="#525252" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+    )
+}
+
+export default ArrowRightPH

components/layout/header/list/col/index.js

@@ -9,7 +9,6 @@ function Col({ isActive, setIsActive, name }) {
             {/* <Button variant="text" className="!p-0.5">
                 <MenuHead />
             </Button> */}
-
             <div className={`
             fixed pb-[31px] pt-[64px] pl-[24px]  padding-responsive top-[-12px] sm:top-[-21px] 
             md:top-[-30px] lg:top-[-40px] w-[85%] z-10 h-screen bg-[#FAFAFA] transition-all duration-500

components/layout/sidebar/List.js

@@ -6,6 +6,8 @@ import ProfileD from "@/components/icons/ProfileD";
 import NotificationD from "@/components/icons/NotificationD";
 import { Button } from "@mui/material";
 import ArrowLeftSideBar from "@/components/icons/ArrowLeftSideBar";
+import { useState } from "react";
+import ModalLogout from "./ModalLogout";
 
 function List({ value, setValue, isTurnsDetails, setIsTurnsDetails, setIsOpenSide }) {
 
@@ -18,8 +20,16 @@ function List({ value, setValue, isTurnsDetails, setIsTurnsDetails, setIsOpenSid
         { name: 'خروج', icon: <LogoutD active={value === 5} /> },
     ];
 
+    const [open, setOpen] = useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
     return (
         <ul className="flex flex-col items-start justify-start w-full">
+            <ModalLogout
+                open={open}
+                handleClose={handleClose}
+            />
             {listMenu.map((item, idx) => (
                 <li
                     className="w-full"
@@ -27,6 +37,7 @@ function List({ value, setValue, isTurnsDetails, setIsTurnsDetails, setIsOpenSid
                 >
                     <Button
                         className={`!py-[16px] sm:!py-[18px] md:!py-[20px] !px-1 hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
+                            transition-all duration-300 before:transition-all before:duration-300
                             !relative before:!absolute before:!right-0 !flex !justify-between !items-center
                             before:!top-1/2 before:!-translate-y-1/2 before:!h-[40px] before:!w-[2px]
                             ${value === idx ?
@@ -34,9 +45,12 @@ function List({ value, setValue, isTurnsDetails, setIsTurnsDetails, setIsOpenSid
                                 'before:!bg-transparent'
                             }`}
                         onClick={() => {
-                            setValue(idx);
                             setIsOpenSide(false);
                             !isTurnsDetails && setIsTurnsDetails(false);
+                            if (idx === 5)
+                                handleOpen()
+                            else
+                                setValue(idx);
                         }}
                     >
                         <div className="!flex !w-full !items-center !justify-start !gap-[8px] md:px-[24px]">

components/layout/sidebar/ModalLogout.js

@@ -0,0 +1,48 @@
+import { styleDefault } from '@/mui';
+import { Box, Button, Modal } from '@mui/material';
+import CloseModalD from '@/components/icons/CloseModalD';
+
+function ModalLogout({ open, handleClose }) {
+    return (
+        <Modal
+            open={open}
+            onClose={handleClose}
+        >
+            <Box
+                sx={styleDefault}
+                className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
+            >
+                <div className='flex items-center justify-between w-full'>
+                    <p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>خروج</p>
+                    <Button
+                        onClick={handleClose}
+                        className='!p-1'
+                        variant='text'
+                    >
+                        <CloseModalD />
+                    </Button>
+                </div>
+                <span className='block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]'></span>
+                <p className='text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal'>آیا مطمئن هستید که می‌خواهید از حساب کاربری خود خارج شوید؟</p>
+                <div className='flex items-center justify-end gap-[16px] mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]'>
+                    <Button
+                        variant='outlined'
+                        onClick={handleClose}
+                        className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium'
+                    >
+                        انصراف
+                    </Button>
+                    <Button
+                        variant='contained'
+                        onClick={handleClose}
+                        className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[#EFEFEF] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium'
+                    >
+                        خروج
+                    </Button>
+                </div>
+            </Box>
+        </Modal>
+    )
+}
+
+export default ModalLogout

components/layoutPanel/sidebar/BgGray.js

@@ -0,0 +1,13 @@
+function BgGray({ isActive, setIsActive }) {
+    return (
+        <div
+            onClick={() => setIsActive(false)}
+            className={`
+                md:hidden ${isActive ? 'bg-[#232323] opacity-40 flex' : 'bg-transparent opacity-40 hidden'}
+                absolute z-[25] cursor-pointer transition-all duration-500 left-0 top-0 w-screen h-screen
+            `}
+        ></div>
+    )
+}
+
+export default BgGray

components/layoutPanel/sidebar/Links.js

@@ -29,16 +29,16 @@ function Links({ open }) {
                             variant="text"
                             className={`
                                 !p-[8px] !flex !items-center !justify-start !gap-[8px] !text-[16px] !rounded-[8px] !transition-all !duration-500
-                                ${item.src === pathname ? '!bg-[#5559CE] !text-[#FAFAFA] !font-bold' : '!text-[#525252] !font-medium'}
+                                ${item.src === pathname ? '!bg-[#5559CE]' : ''}
                             `}
                         >
-
                             <div className="p-[4px] bg-[#E5E9FF] rounded-[4px] w-fit">
                                 {item.icon}
                             </div>
                             <p className={`
                                 transition-all duration-500
                                 ${open ? 'opacity-100' : 'md:opacity-0'}
+                                ${item.src === pathname ? '!text-[#FAFAFA] !font-bold' : '!text-[#525252] !font-medium'}
                             `}>{item.name}</p>
                         </Button>
                     </Link>

components/layoutPanel/sidebar/index.js

@@ -1,34 +1,28 @@
-import { useState } from "react";
-
 import Links from "./Links";
 import HeadMd from "./HeadMd";
 import HeadSm from "./HeadSm";
 import { Button } from "@mui/material";
 import LogoutOrangeP from "@/components/icons/LogoutOrangeP";
 
-function Sidebar({ active, setActive }) {
-
-  const [open, setOpen] = useState(false);
-
+function Sidebar({ active, setActive, open, setOpen }) {
   return (
     <div className={`
-        transition-all duration-500 md:flex fixed md:relative z-30 w-[85%] md:w-fit
+        transition-all duration-500 md:flex fixed md:relative z-30 w-[85%]
         ${active ? ' right-0' : 'right-[-85%]'}
-        ${open ? 'min-w-[243px]' : 'min-w-[96px]'}
+        ${open ? 'min-w-[243px] md:w-[243px]' : 'min-w-[96px] md:w-[96px]'}
     `}>
       <aside className={`
         relative h-screen overflow-hidden 
-        transition-all duration-500 w-[85%] md:w-fit
+        transition-all duration-500 w-[85%]
         ${active ? ' right-0' : 'right-[-85%]'}
         ${open ? 'w-[243px]' : 'w-[96px]'}
       `}>
         <div className={`
-           z-30
-          md:top-0 md:right-0 w-[85%] md:w-fit
+           z-30 md:top-0 md:right-0 w-[85%]
         ${active ? ' right-0' : 'right-[-85%]'}
           overflow-hidden p-[24px] h-full flex flex-col justify-between items-start fixed 
           border-0 border-l border-l-[#EFEFEF] bg-[#FFF]
-          transition-all duration-700
+          transition-all duration-500
           ${open ? 'md:w-[243px]' : 'md:w-[96px]'}
         `}>
           <div className="w-full">

components/layoutPanel/userDetail/Activities.js

@@ -1,6 +1,7 @@
+import TextLoading from "@/app/component/loading/Text"
 import WarnP from "@/components/icons/WarnP"
 
-function Activities({ data }) {
+function Activities({ data, loading }) {
     return (
         <div className="w-full mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px]">
             <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">فعالیت های امروز</p>
@@ -15,9 +16,13 @@ function Activities({ data }) {
                                 <div className="bg-[rgba(255,192,81,0.20)] p-[8px] rounded-full">
                                     <WarnP />
                                 </div>
-                                <p className="text-[#616161] text-[16px] font-medium">{item.text}</p>
+                                <TextLoading width={110} height={18} loading={loading}>
+                                    <p className="text-[#616161] text-[16px] font-medium">{item.text}</p>
+                                </TextLoading>
                             </div>
-                            <p className="text-[#7E7E7E] text-[12px] font-normal">{item.time}</p>
+                            <TextLoading width={55} height={18} loading={loading}>
+                                <p className="text-[#7E7E7E] text-[12px] font-normal">{item.time}</p>
+                            </TextLoading>
                         </div>
                         {data.todays_activities.length > idx + 1 && (
                             <span className="block h-px w-full bg-transparent md:bg-[#EFEFEF] px-[13px] my-[16px] md:my-[20px] lg:my-[24px]"></span>

components/layoutPanel/userDetail/Date.js

@@ -1,4 +1,6 @@
-import { DatePicker } from "jalaali-react-date-picker"
+'use client'
+
+import { DatePicker } from "jalaali-react-date-picker";
 
 function Date() {
     return (

components/layoutPanel/userDetail/Head.js

@@ -1,32 +1,46 @@
+import CircularLoading from '@/app/component/loading/Circular'
+import TextLoading from '@/app/component/loading/Text'
 import ArrowLeftBlueP from '@/components/icons/ArrowLeftBlueP'
 import LocationP from '@/components/icons/LocationP'
 import { Button } from '@mui/material'
 import Image from 'next/image'
 import React from 'react'
 
-function Head({ data }) {
+function Head({ data, loading }) {
     return (
         <div className="flex w-full flex-col items-center justify-start">
-            <Image
-                src={data.src}
-                height={80}
-                width={80}
-                alt="profile"
-            />
-            <p className="text-[#3B3B3B] text-[14px] font-semibold mt-[8px] mb-[4px]">{data.name}</p>
+            <CircularLoading width={80} height={80} loading={loading}>
+                <Image
+                    src={data.src}
+                    height={80}
+                    width={80}
+                    alt="profile"
+                />
+            </CircularLoading>
+            <div className={loading && 'mt-[8px] mb-[4px]'}>
+                <TextLoading width={60} height={18} loading={loading}>
+                    <p className="text-[#3B3B3B] text-[14px] font-semibold mt-[8px] mb-[4px]">{data.name}</p>
+                </TextLoading>
+            </div>
             <div className="flex items-center justify-center gap-[8px]">
                 <LocationP />
-                <p className="text-[#7E7E7E] text-[14px] font-normal">نماینده شهر اهواز</p>
+                <TextLoading width={55} height={16} loading={loading}>
+                    <p className="text-[#7E7E7E] text-[14px] font-normal">نماینده شهر اهواز</p>
+                </TextLoading>
             </div>
             <div className="flex items-center justify-center my-[16px]">
                 <div className="flex flex-col items-center justify-center">
                     <p className="text-[#9B9B9B] text-[14px] font-normal">کل بیماران</p>
-                    <p className="text-[#3B3B3B] text-[14px] font-medium">{data.all_patients}</p>
+                    <TextLoading width={55} height={16} loading={loading}>
+                        <p className="text-[#3B3B3B] text-[14px] font-medium">{data.all_patients}</p>
+                    </TextLoading>
                 </div>
                 <span className="block h-[44px] w-px bg-[#EFEFEF] mx-[44px]"></span>
                 <div className="flex flex-col items-center justify-center">
                     <p className="text-[#9B9B9B] text-[14px] font-normal">کل نوبت ها</p>
-                    <p className="text-[#3B3B3B] text-[14px] font-medium">{data.total_turns}</p>
+                    <TextLoading width={55} height={16} loading={loading}>
+                        <p className="text-[#3B3B3B] text-[14px] font-medium">{data.total_turns}</p>
+                    </TextLoading>
                 </div>
             </div>
             <Button

components/layoutPanel/userDetail/index.js

@@ -2,17 +2,17 @@ import Head from "./Head";
 import Date from "./Date";
 import Activities from "./Activities";
 
-function UserDetail({ data }) {
+function UserDetail({ data, loading }) {
     return (
         <div className="hidden xl:flex min-w-[332px] h-full opacity-page">
             <div
                 className="min-w-[332px] p-[24px] border-0 border-r border-r-[#EFEFEF] h-full items-start fixed top-0 left-0
                 bg-[#FFF] py-[40px] px-[16px]"
             >
-                <Head data={data} />
+                <Head data={data} loading={loading} />
                 <span className="block w-full h-px bg-[#EFEFEF] px-[22px] mt-[13px] mb-[16px]"></span>
                 <Date />
-                <Activities data={data} />
+                <Activities data={data} loading={loading} />
             </div>
         </div>
     )

components/panel/ColTable.js

@@ -2,17 +2,17 @@ import CircularLoading from "@/app/component/loading/Circular"
 import TextLoading from "@/app/component/loading/Text"
 import Image from "next/image"
 
-function ColTable({ data }) {
+function ColTable({ data, loading }) {
     return (
         <ul className="flex md:hidden flex-col gap-[16px]">
-            {data.list_of_doctors_appointments.map((item, idx) => (
+            {data.map((item, idx) => (
                 <li
                     key={idx}
                     className="bg-[#FFF] p-[12px] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)]"
                 >
                     <div className="flex items-center justify-between">
                         <div className='flex items-center justify-start gap-[8px] !text-nowrap'>
-                            <CircularLoading width={32} height={32} loading={false}>
+                            <CircularLoading width={32} height={32} loading={loading}>
                                 <Image
                                     src={item.image}
                                     alt='doctor'
@@ -20,28 +20,36 @@ function ColTable({ data }) {
                                     width={32}
                                 />
                             </CircularLoading>
-                            <TextLoading width={40} height={18} loading={false}>
+                            <TextLoading width={40} height={18} loading={loading}>
                                 {item.name}
                             </TextLoading>
                         </div>
-                        <p className="px-[8px] py-[4px] text-[#F17732] text-[14px] font-medium bg-[rgba(255,216,197,0.50)] rounded-[4px]">
-                            تعداد نوبت: {item.number_of_turns}
-                        </p>
+                        <TextLoading width={105} height={18} loading={loading}>
+                            <p className="px-[8px] py-[4px] text-[#F17732] text-[14px] font-medium bg-[rgba(255,216,197,0.50)] rounded-[4px]">
+                                تعداد نوبت: {item.number_of_turns}
+                            </p>
+                        </TextLoading>
                     </div>
                     <div className="flex flex-col mt-[16px]">
                         <div className="flex items-center justify-between">
                             <p className="text-[#7E7E7E] text-[14px] font-normal">تخصص:</p>
-                            <p className="text-[#616161] text-[14px] font-medium">{item.expertise}</p>
+                            <TextLoading width={90} height={18} loading={loading}>
+                                <p className="text-[#616161] text-[14px] font-medium">{item.expertise}</p>
+                            </TextLoading>
                         </div>
                         <span className="block h-px w-full bg-[#EFEFEF] my-[12px]"></span>
                         <div className="flex items-center justify-between">
                             <p className="text-[#7E7E7E] text-[14px] font-normal">تاریخ نوبت:</p>
-                            <p className="text-[#616161] text-[14px] font-medium">{item.date}</p>
+                            <TextLoading width={85} height={18} loading={loading}>
+                                <p className="text-[#616161] text-[14px] font-medium">{item.date}</p>
+                            </TextLoading>
                         </div>
                         <span className="block h-px w-full bg-[#EFEFEF] my-[12px]"></span>
                         <div className="flex items-center justify-between">
                             <p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
-                            <p className="text-[#616161] text-[14px] font-medium">{item.hour}</p>
+                            <TextLoading width={60} height={18} loading={loading}>
+                                <p className="text-[#616161] text-[14px] font-medium">{item.hour}</p>
+                            </TextLoading>
                         </div>
                     </div>
                 </li>

components/panel/addDoctor/index.js

@@ -3,16 +3,21 @@
 import { useState } from "react";
 
 // Tabs
-import TabsHead from "./tabsHead";
-import Turns from "./tabsHead/turns";
-import SpecialDays from "./tabsHead/specialDays";
-import WorkingDays from "./tabsHead/workingDays";
-import OfficeInformation from "./tabsHead/officeInformation";
-import GeneralInformation from "./tabsHead/generalInformation";
+import ListMenu from "./listMenu";
+import Turns from "./listMenu/turns";
+import SpecialDays from "./listMenu/specialDays";
+import WorkingDays from "./listMenu/workingDays";
+import OfficeInformation from "./listMenu/officeInformation";
+import GeneralInformation from "./listMenu/generalInformation";
+import ArrowRightPH from "@/components/icons/ArrowRightPH";
+import { Button } from "@mui/material";
+
+const listTab = ['اطلاعات عمومی', 'اطلاعات مطب', 'نوبت ها', 'روزهای کاری', 'روزهای خاص'];
 
 function AddDoctorPage() {
 
     const [value, setValue] = useState(0);
+    const [open, setOpen] = useState(false);
 
     const handleChange = (event, newValue) => setValue(newValue);
 
@@ -26,13 +31,23 @@ function AddDoctorPage() {
 
     return (
         <div className="opacity-page">
-            <p className="text-[#525252] text-[20px] font-bold">پروفایل من</p>
-            <div className="rounded-[8px] mt-[24px] bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] pt-[12px] pb-[24px] px-[56px]">
-                <TabsHead
+            <p className="text-[#525252] text-[20px] font-bold hidden md:flex">پروفایل من</p>
+            <Button
+                onClick={() => setOpen(true)}
+                className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
+            >
+                <ArrowRightPH />
+                <p className="text-[#525252] text-[14px] font-bold">{listTab[value]}</p>
+            </Button>
+            <div className="rounded-[8px] mt-0 md:mt-[24px] bg-transparent md:bg-[#FFF] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] pt-0 md:pt-[12px] pb-0 md:pb-[12px] lg:pb-[24px] px-0 md:px-[14px] lg:px-[26px] xl:px-[56px]">
+                <ListMenu
+                    open={open}
                     value={value}
+                    listTab={listTab}
+                    setOpen={setOpen}
                     handleChange={handleChange}
                 />
-                <div className={`mt-[24px] ${value !== 4 ? 'mx-[56px]' : 'mx-0'}`}>
+                <div className={`mt-[24px] ${value !== 4 ? 'mx-0 md:-[14px] lg:mx-[26px] xl:mx-[56px]' : 'mx-0'}`}>
                     {components[value]}
                 </div>
             </div>

components/panel/addDoctor/listMenu/Menu.js

@@ -0,0 +1,45 @@
+import ArrowLeftPH from "@/components/icons/ArrowLeftPH"
+import { Button } from "@mui/material"
+
+function Menu({ value, open, setOpen, listTab, handleChange }) {
+    return (
+        <ul
+            className={`
+                flex bg-[#FAFAFA] flex-col justify-start items-start
+                fixed h-screen w-full z-50 top-[80px] transition-all duration-500
+                ${open ?
+                    'right-0' :
+                    '-right-full'
+                }
+            `}
+        >
+            {listTab.map((item, idx) => (
+                <li
+                    key={idx}
+                    className="w-[calc(100%-32px)] mx-[16px]"
+                >
+                    <Button
+                        onClick={() => {
+                            handleChange(_, idx);
+                            setOpen(false)
+                        }}
+                        className="!flex !p-2 !items-center !justify-between !w-full"
+                    >
+                        <p
+                            className={`
+                                text-[16px] transition-all duration-500
+                                ${value === idx ? 'text-[#5559CE] font-bold' : 'text-[#7E7E7E] font-normal'}
+                            `}
+                        >{item}</p>
+                        <ArrowLeftPH active={value === idx} />
+                    </Button>
+                    {listTab.length > idx + 1 && (
+                        <span className="my-[12px] block h-px w-full bg-[#EFEFEF]"></span>
+                    )}
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+export default Menu

components/panel/addDoctor/listMenu/Tab.js

@@ -1,8 +1,6 @@
-import Tabs from "@/app/component/Tabs";
+import Tabs from "@/app/component/Tabs"
 
-const listTab = ['اطلاعات عمومی', 'اطلاعات مطب', 'نوبت ها', 'روزهای کاری', 'روزهای خاص'];
-
-function TabsHead({ value, handleChange }) {
+function Tab({ value, listTab, handleChange }) {
     return (
         <Tabs
             isSm={false}
@@ -34,4 +32,4 @@ function TabsHead({ value, handleChange }) {
     )
 }
 
-export default TabsHead;
+export default Tab

components/panel/addDoctor/listMenu/generalInformation/Head.js

@@ -4,7 +4,7 @@ import { Button } from "@mui/material"
 
 function Head() {
     return (
-        <div className="flex items-center justify-start gap-[10px]">
+        <div className="flex items-center justify-center md:justify-start gap-[10px]">
             <div className="p-[24px] grid place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full">
                 <ProfileP />
             </div>

components/panel/addDoctor/listMenu/generalInformation/form/Form.js

@@ -16,7 +16,7 @@ function Form() {
         expertise: { value: 'دندان پزشکی', isEdit: false },
         description: { value: '', isEdit: false },
         skills: { value: '', isEdit: false },
-        time_work: { value: '', isEdit: false },
+        time_work: { value: '', isEdit: false }
     });
     const [selected, setSelected] = useState({
         degree: '',
@@ -34,7 +34,7 @@ function Form() {
 
     return (
         <div>
-            <div className="mt-[28px] grid grid-cols-2 gap-x-[48px] gap-y-[24px]">
+            <div className="mt-[28px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
                 <ContentText text='نام و نام خانوادگی'>
                     <EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.name} name='name' />
                 </ContentText>
@@ -67,7 +67,7 @@ function Form() {
             </div>
             <div className="mt-[40px] w-full flex justify-end">
                 <Button
-                    className="!bg-[#5559CE] !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[16px] !font-medium"
+                    className="!bg-[#5559CE] !w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
                     variant="contained"
                 >
                     ثبت اطلاعات

components/panel/addDoctor/listMenu/index.js

@@ -0,0 +1,27 @@
+import Menu from "./Menu";
+import Tab from "./Tab";
+
+function ListMenu({ value, open, setOpen, handleChange, listTab }) {
+    return (
+        <>
+            <div className="hidden md:flex">
+                <Tab
+                    value={value}
+                    listTab={listTab}
+                    handleChange={handleChange}
+                />
+            </div>
+            <div className="flex md:hidden">
+                <Menu
+                    open={open}
+                    value={value}
+                    listTab={listTab}
+                    setOpen={setOpen}
+                    handleChange={handleChange}
+                />
+            </div>
+        </>
+    )
+}
+
+export default ListMenu;

components/panel/addDoctor/listMenu/officeInformation/Form.js

@@ -32,7 +32,7 @@ function Form() {
         });
 
     return (
-        <div className="mt-[24px] grid grid-cols-2 gap-x-[48px] gap-y-[24px]">
+        <div className="mt-[24px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
             <ContentText text='استان'>
                 <AutoCompleteSelect
                     updateData={updateSelect}

components/panel/addDoctor/listMenu/officeInformation/index.js

@@ -8,7 +8,7 @@ function OfficeInformation() {
             <Form />
             <div className="mt-[40px] w-full flex justify-end">
                 <Button
-                    className="!bg-[#5559CE] !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[16px] !font-medium"
+                    className="!bg-[#5559CE] !w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
                     variant="contained"
                 >
                     ثبت اطلاعات

components/panel/addDoctor/listMenu/specialDays/Form.js

@@ -29,7 +29,7 @@ function Form() {
 
     return (
         <div className="flex flex-col w-full-content">
-            <div className="flex w-full items-center justify-start gap-[16px]">
+            <div className="flex flex-col sm:flex-row w-full items-center justify-start gap-[16px]">
                 <ContentText text='تعداد نوبت در هر روز'>
                     <AutoCompleteSelect
                         updateData={updateSelect}
@@ -46,10 +46,10 @@ function Form() {
                         list={timeEachTurn}
                     />
                 </ContentText>
-                <div className="content-text-panel"></div>
-                <div className="min-w-[152px]"></div>
+                <div className="hidden lg:flex content-text-panel"></div>
+                <div className="hidden lg:flex min-w-[152px]"></div>
             </div>
-            <div className="flex items-end justify-center gap-[16px] mt-[32px]">
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:flex items-end justify-center gap-[16px] mt-[32px]">
                 <ContentText text='تعداد نوبت در هر روز'>
                     <AutoCompleteSelect
                         updateData={updateSelect}
@@ -76,7 +76,7 @@ function Form() {
                 </ContentText>
                 <Button
                     variant="outlined"
-                    className="!border-[#5559CE] !gap-[4px] !min-w-[152px]"
+                    className="!border-[#5559CE] !mr-auto sm:!mr-0 !h-[44px] md:!h-[46px] lg:!h-[48px] !gap-[4px] !w-fit sm:!w-full md:!w-fit !min-w-fit lg:!min-w-[152px]"
                 >
                     <PlusBlueP />
                     اضافه کردن

components/panel/addDoctor/listMenu/specialDays/List.js

@@ -14,10 +14,10 @@ function List() {
     const handleClose = () => setOpen(false);
 
     return (
-        <div className="w-full flex flex-col mt-[48px] items-start gap-[16px]">
+        <div className="w-full flex flex-col mt-[24px] sm:mt-[32px] md:mt-[40px] lg:mt-[48px] items-start gap-[24px] md:gap-[20px] lg:gap-[16px]">
             <p className="text-[#525252] text-[14px] font-bold">لیست روزهای خاص</p>
             <TableContainer
-                className="!w-fit"
+                className="!w-full md:!w-fit"
                 sx={{
                     '&.MuiTableContainer-root': {
                         boxShadow: 'none !important',
@@ -46,10 +46,10 @@ function List() {
                                 <TableCell className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]" component="th" scope="row">
                                     {row.name}
                                 </TableCell>
-                                <TableCell className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]" align="right">
+                                <TableCell className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]" align="left">
                                     {row.morning_time}
                                 </TableCell>
-                                <TableCell className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]" align="right">
+                                <TableCell className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]" align="left">
                                     {row.evening_time}
                                 </TableCell>
                             </TableRow>

components/panel/addDoctor/listMenu/specialDays/index.js

@@ -9,7 +9,7 @@ function SpecialDays() {
             <Form />
             <List />
             <Button
-                className="!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
+                className="!gap-[4px] !w-full md:!w-fit !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
                 !bg-[#5559CE] !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
                 !mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]"
             >

components/panel/addDoctor/listMenu/turns/Form.js

@@ -13,7 +13,7 @@ function Form() {
     const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
 
     return (
-        <div className="mt-[40px] grid grid-cols-2 gap-x-[48px] gap-y-[24px]">
+        <div className="mt-[40px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
             <ContentText text='تعداد نوبت در هر روز'>
                 <AutoCompleteSelect
                     updateData={updateSelect}

components/panel/addDoctor/listMenu/turns/index.js

@@ -7,7 +7,7 @@ function Turns() {
         <div className="opacity-page">
             <Form />
             <Button
-                className="!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
+                className="!gap-[4px] !w-full md:!w-fit !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
                 !bg-[#5559CE] !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
                 !mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]"
             >

components/panel/addDoctor/listMenu/workingDays/List.js

@@ -21,7 +21,7 @@ function List() {
     return (
         <div className="w-full flex justify-center">
             <TableContainer
-                className="!mt-[32px] !w-fit"
+                className="!mt-[40px] md:!mt-[36px] lg:!mt-[32px] !w-fit"
                 sx={{
                     '&.MuiTableContainer-root': {
                         boxShadow: 'none !important',

components/panel/addDoctor/listMenu/workingDays/index.js

@@ -3,7 +3,7 @@ import List from "./List"
 function WorkingDays() {
     return (
         <div className="opacity-page">
-            <p className="text-[#525252] text-[16px] font-bold">لیست روزهای کاری</p>
+            <p className="text-[#525252] text-[14px] md:text-[16px] text-center md:text-start font-bold">لیست روزهای کاری</p>
             <List />
         </div>
     )

components/panel/addDoctor/listMenu/workingDays/modal/ContentModal.js

@@ -12,7 +12,7 @@ function ContentModal({ open, setOpen, handleClose }) {
         >
             <Box
                 sx={styleDefault}
-                className="!w-fit !py-[20px] !px-[16px] !pb-[56px]"
+                className="!w-full !rounded-none md:!rounded-[8px] md:!w-fit !h-full md:!h-fit !py-[20px] !px-[16px] !pb-[56px]"
             >
                 <div className="flex items-center justify-between">
                     <p className="text-[#525252] text-[20px] font-bold">اضافه کردن روز کاری</p>
@@ -24,9 +24,9 @@ function ContentModal({ open, setOpen, handleClose }) {
                         <CloseModalD />
                     </Button>
                 </div>
-                <div className="mx-[52px]">
+                <div className="mx-0 md:mx-[52px]">
                     <Radios />
-                    <Form />
+                    <Form handleClose={handleClose} />
                 </div>
             </Box>
         </Modal>

components/panel/addDoctor/listMenu/workingDays/modal/Form.js

@@ -4,7 +4,7 @@ import FieldIcon from "@/app/component/FieldIcon";
 import ContentText from "@/components/panel/ContentText";
 import { Button } from "@mui/material";
 
-function Form() {
+function Form({ handleClose }) {
 
     const [data, setData] = useState({
         start_time: '',
@@ -14,7 +14,7 @@ function Form() {
     const changeData = (value, name) => setData({ ...data, [name]: value })
 
     return (
-        <div className="flex flex-col gap-[40px] min-w-[420px]">
+        <div className="flex flex-col gap-[32px] md:gap-[36px] lg:gap-[40px] min-w-fit md:min-w-[420px]">
             <ContentText text='زمان شروع'>
                 <FieldIcon
                     placeholder='انتخاب کنید...'
@@ -31,14 +31,16 @@ function Form() {
                     name='end_time'
                 />
             </ContentText>
-            <div className="flex items-center justify-center gap-[16px]">
+            <div className="flex flex-wrap items-center justify-center gap-[16px]">
                 <Button
                     variant="outlined"
-                    className="!border-[#5559CE] !shadow-none !px-[48px]"
+                    onClick={handleClose}
+                    className="!text-[16px] !font-medium !border-[#5559CE] !py-[5px] md:!py-[7px] lg:!py-[9px] !shadow-none !px-[46px]"
                 >انصراف</Button>
                 <Button
                     variant="contained"
-                    className=" !shadow-none !px-[48px]"
+                    onClick={handleClose}
+                    className="!text-[16px] !font-medium !shadow-none !py-[5px] md:!py-[7px] lg:!py-[9px] !px-[46px]"
                 >ذخیره</Button>
             </div>
         </div>

components/panel/addDoctor/listMenu/workingDays/modal/ModalAddTime.js

@@ -8,7 +8,7 @@ function ModalAddTime({ handleOpen }) {
             <Button
                 variant='text'
                 onClick={handleOpen}
-                className='!gap-[8px] !p-1 !text-[#5559CE] !text-[16px] !font-medium'
+                className='!gap-[2px] sm:!gap-[4px] md:!gap-[6px] lg:!gap-[8px] !p-1 !text-[#5559CE] !text-[14px] md:!text-[16px] !font-medium'
             >
                 <AddTimeP />
                 انتخاب کنید

components/panel/addDoctor/listMenu/workingDays/modal/Radios.js

@@ -4,7 +4,7 @@ function Radios() {
     return (
         <RadioGroup
             dir="ltr"
-            className="!flex !flex-row !my-[40px] !gap-[36px] !items-center !justify-end"
+            className="!flex !flex-row !mb-[32px] md:!mb-[36px] !my-[40px] !gap-[36px] !items-center !justify-end"
             defaultValue='workingDay'
             sx={{
                 '& .muirtl-j204z7-MuiFormControlLabel-root': {

components/panel/dashboard/Cards.js

@@ -1,8 +1,9 @@
-import CalendarTickGreenP from "../../icons/CalendarTickGreenP"
-import CardOrangeP from "../../icons/CardOrangeP"
-import PeopleBlueP from "../../icons/PeopleBlueP"
+import CalendarTickGreenP from "../../icons/CalendarTickGreenP";
+import TextLoading from "@/app/component/loading/Text";
+import CardOrangeP from "../../icons/CardOrangeP";
+import PeopleBlueP from "../../icons/PeopleBlueP";
 
-function Cards({ data }) {
+function Cards({ data, loading }) {
 
   const list = [
     { text: 'تعداد کل بیماران', bg_color: 'bg-[#E5E9FF]', value: data.number_of_patients, label: 'نفر', icon: <PeopleBlueP /> },
@@ -22,10 +23,12 @@ function Cards({ data }) {
           </div>
           <div className="flex items-center justify-between">
             <p className="text-[#525252] text-[14px] font-normal">{item.text}</p>
-            <p className="text-[#3B3B3B] text-[24px] font-medium">
-              {item.value}
-              <span className="text-[#616161] mr-[6px] text-[12px] font-normal">{item.label}</span>
-            </p>
+            <TextLoading width={70} height={20} loading={loading}>
+              <p className="text-[#3B3B3B] text-[24px] font-medium">
+                {item.value}
+                <span className="text-[#616161] mr-[6px] text-[12px] font-normal">{item.label}</span>
+              </p>
+            </TextLoading>
           </div>
         </li>
       ))}

components/panel/dashboard/amountOfIncome/Chart.js

@@ -2,9 +2,10 @@
 
 import { LineChart, lineElementClasses } from "@mui/x-charts"
 
-function Chart({ data }) {
+function Chart({ data, loading }) {
     return (
         <LineChart
+            loading={loading}
             xAxis={[{
                 data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
                 disableLine: true,
@@ -31,7 +32,7 @@ function Chart({ data }) {
             sx={{
                 [`& .${lineElementClasses.root}`]: {
                     strokeWidth: 3,
-                    stroke: '#5559CE'
+                    stroke: loading ? '#E6E6E6' : '#5559CE'
                 },
                 '& .MuiAreaElement-series-income': {
                     fill: "url('#myGradient') !important",

components/panel/dashboard/amountOfIncome/index.js

@@ -1,12 +1,12 @@
 import Chart from "./Chart"
 import Head from "./Head"
 
-function AmountOfIncome({ data }) {
+function AmountOfIncome({ data, loading }) {
     return (
         <div className="rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
             <Head />
             <div dir="ltr">
-                <Chart data={data} />
+                <Chart data={data} loading={loading} />
             </div>
         </div>
     )

components/panel/dashboard/index.js

@@ -1,16 +1,27 @@
+import { useEffect, useState } from "react";
+
 import Activities from "@/components/layoutPanel/userDetail/Activities";
 import AmountOfIncome from "./amountOfIncome";
 import Cards from "./Cards";
 import List from "./list";
 
 function DashboardPage({ data }) {
+
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    }, []);
+
     return (
         <div className="flex mt-[4px] flex-col gap-[20px] opacity-page">
-            <Cards data={data} />
-            <List data={data} />
-            <AmountOfIncome data={data} />
+            <Cards data={data} loading={loading} />
+            <List data={data} loading={loading} />
+            <AmountOfIncome data={data} loading={loading} />
             <div className="flex xl:hidden">
-                <Activities data={data} />
+                <Activities data={data} loading={loading} />
             </div>
         </div>
     )

components/panel/dashboard/list/Table.js

@@ -4,7 +4,7 @@ import TextLoading from "@/app/component/loading/Text"
 import { TableCell, TableRow } from "@mui/material"
 import Image from "next/image"
 
-function Table({ data }) {
+function Table({ data, loading }) {
 
     const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'تعدد نوبت'];
     const centerTable = [0, 4];
@@ -22,13 +22,13 @@ function Table({ data }) {
                         className='!border-0 !border-b !border-[#DBDBDB]'
                     >
                         <TableCell className='!pr-[18px] !text-[#616161] !text-[16px] !font-medium !text-nowrap' align="center">
-                            <TextLoading width={15} height={18} loading={false}>
+                            <TextLoading width={15} height={18} loading={loading}>
                                 {idx + 1}
                             </TextLoading>
                         </TableCell>
                         <TableCell className='!pr-[18px] !text-[#616161] !text-[16px] !font-medium !text-nowrap' component="th" scope="row">
                             <div className='flex items-center justify-start gap-[8px] !text-nowrap'>
-                                <CircularLoading width={32} height={32} loading={false}>
+                                <CircularLoading width={32} height={32} loading={loading}>
                                     <Image
                                         src={row.image}
                                         alt='doctor'
@@ -36,28 +36,28 @@ function Table({ data }) {
                                         width={32}
                                     />
                                 </CircularLoading>
-                                <TextLoading width={40} height={18} loading={false}>
+                                <TextLoading width={40} height={18} loading={loading}>
                                     {row.name}
                                 </TextLoading>
                             </div>
                         </TableCell>
                         <TableCell className='!text-start !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
-                            <TextLoading width={30} height={18} loading={false}>
+                            <TextLoading width={30} height={18} loading={loading}>
                                 {row.expertise}
                             </TextLoading>
                         </TableCell>
                         <TableCell className='!text-start !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
-                            <TextLoading width={50} height={18} loading={false}>
+                            <TextLoading width={50} height={18} loading={loading}>
                                 {row.date}
                             </TextLoading>
                         </TableCell>
                         <TableCell className='!text-center !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
-                            <TextLoading width={50} height={18} loading={false}>
+                            <TextLoading width={50} height={18} loading={loading}>
                                 {row.hour}
                             </TextLoading>
                         </TableCell>
                         <TableCell className='!text-right !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
-                            <TextLoading width={50} height={18} loading={false}>
+                            <TextLoading width={50} height={18} loading={loading}>
                                 {row.number_of_turns}
                             </TextLoading>
                         </TableCell>

components/panel/dashboard/list/index.js

@@ -1,9 +1,9 @@
 import { Button } from "@mui/material"
 import ArrowLeftP from "../../../icons/ArrowLeftP"
 import Table from "./Table"
-import ColTable from "./ColTable"
+import ColTable from "../../ColTable"
 
-function List({ data }) {
+function List({ data, loading }) {
     return (
         <div className="rounded-[8px] border overflow-hidden border-solid w-full border-transparent md:border-[#EFEFEF] bg-transparent md:bg-[#FFF]">
             <div className="flex items-center justify-between p-[16px]">
@@ -17,8 +17,8 @@ function List({ data }) {
                 </Button>
             </div>
             <div className="w-full overflow-auto">
-                <Table data={data} />
-                <ColTable data={data} />
+                <Table data={data} loading={loading} />
+                <ColTable data={data.list_of_doctors_appointments} loading={loading} />
             </div>
         </div>
     )

components/panel/turns/head/Date.js

@@ -2,21 +2,24 @@ import { Button, ButtonGroup } from "@mui/material"
 
 function Date() {
     return (
-        <ButtonGroup
-            variant="outlined"
-            className=""
-        >
-            <Button
-                className="!border-[#EFEFEF] !bg-[#FFF] !py-[4.5px] !px-[33px] !text-[#7E7E7E] !text-[16px] !font-normal"
+        <div className="flex items-center justify-start gap-y-[20px] gap-[8px] md:gap-0">
+            <p className="text-[#616161] text-[14px] font-normal md:hidden">انتخاب بازه زمانی</p>
+            <ButtonGroup
+                variant="outlined"
+                className=""
             >
-                از تاریخ
-            </Button>
-            <Button
-                className="!border-[#EFEFEF] !bg-[#FFF] !py-[4.5px] !px-[33px] !text-[#7E7E7E] !text-[16px] !font-normal"
-            >
-                تا تاریخ
-            </Button>
-        </ButtonGroup>
+                <Button
+                    className="!border-[#EFEFEF] !bg-[#FFF] !py-[4.5px] !px-[33px] !text-[#7E7E7E] !text-[16px] !font-normal"
+                >
+                    از تاریخ
+                </Button>
+                <Button
+                    className="!border-[#EFEFEF] !bg-[#FFF] !py-[4.5px] !px-[33px] !text-[#7E7E7E] !text-[16px] !font-normal"
+                >
+                    تا تاریخ
+                </Button>
+            </ButtonGroup>
+        </div>
     )
 }
 

components/panel/turns/head/SearchDoctor.js

@@ -5,11 +5,11 @@ import { Button, ButtonGroup, TextField } from '@mui/material'
 
 function SearchDoctor() {
     return (
-        <div className="flex items-center justify-between">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-y-[20px] justify-between mt-[20px] md:mt-[22px] lg:mt-[24px] ">
             <ButtonGroup
                 variant="contained"
-                className="!bg-[#FFF] lg:!w-[55%] !mt-[24px] !rounded-[4px] !overflow-hidden 
-            flex items-center !shadow-none !h-fit !p-1 !border !border-[#EFEFEF]"
+                className="!bg-[#FFF] lg:!w-[55%] !rounded-[4px] !overflow-hidden 
+                flex items-center !shadow-none !h-fit !p-1 !border !border-[#EFEFEF]"
             >
                 <TextField
                     variant="standard"
@@ -40,7 +40,7 @@ function SearchDoctor() {
             </ButtonGroup>
             <Button
                 variant='outlined'
-                className='!border-[#5559CE] !flex !items-center !gap-[6px] !rounded-[4px]'
+                className='!border-[#5559CE] !flex !text-[14px] md:!text-[16px] !items-center !gap-[4px] md:!gap-[5px] lg:!gap-[6px] !rounded-[4px] !py-[8px] md:!py-[9px] !px-[12px] sm:!px-[14px] md:!px-[16px] lg:!px-[18px]'
             >
                 <ExportP />
                 خروجی گرفتن

components/panel/turns/head/index.js

@@ -4,8 +4,8 @@ import SearchDoctor from "./SearchDoctor"
 function Head() {
     return (
         <div className="w-full">
-            <div className="flex items-center justify-start gap-[10px]">
-                <p className="text-[#525252] text-[20px] font-bold">لیست نوبت های پزشکان</p>
+            <div className="flex flex-col sm:flex-row items-start md:items-center justify-start gap-[10px]">
+                <p className="text-[#525252] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">لیست نوبت های پزشکان</p>
                 <Date />
             </div>
             <SearchDoctor />

components/panel/turns/index.js

@@ -1,12 +1,25 @@
+'use client';
+
+import { useEffect, useState } from "react";
+
 import Head from "./head";
-import List from "./List";
+import List from "./list";
 
 
 function TurnsPage({ data }) {
+
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    }, []);
+
     return (
-        <div className="bg-[#FFF] opacity-page rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] p-[24px]">
+        <div className="bg-transparent md:bg-[#FFF] opacity-page rounded-[8px] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] pt-0 md:pt-[12px] lg:pt-[24px] px-0 md:px-[24px] p-[24px]">
             <Head />
-            <List data={data} />
+            <List data={data} loading={loading} />
         </div>
     )
 }

components/panel/turns/list/Cards.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Cards() {
+  return (
+    <div className='flex hidden'>Cards</div>
+  )
+}
+
+export default Cards

components/panel/turns/list/Table.js

@@ -1,18 +1,19 @@
-import CustomTable from "@/app/component/CustomTable"
-import CircularLoading from "@/app/component/loading/Circular"
-import CustomLoading from "@/app/component/loading/Custom"
-import TextLoading from "@/app/component/loading/Text"
-import Pagination from "@/app/component/Pagination"
-import { TableCell, TableRow } from "@mui/material"
-import Image from "next/image"
+import Image from "next/image";
 
-function List({ data }) {
+import { TableCell, TableRow } from "@mui/material";
+import Pagination from "@/app/component/Pagination";
+import CustomTable from "@/app/component/CustomTable";
+import TextLoading from "@/app/component/loading/Text";
+import CustomLoading from "@/app/component/loading/Custom";
+import CircularLoading from "@/app/component/loading/Circular";
+
+function Table({ data, loading }) {
 
     const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'تعدد نوبت'];
     const centerTable = [0, 4];
 
     return (
-        <div className="mt-[32px] pb-[20px] table-rounded-8">
+        <div className="hidden md:flex flex-col">
             <CustomTable
                 tableHead={tableHead}
                 centerTable={centerTable}
@@ -23,13 +24,13 @@ function List({ data }) {
                         className='!border-0 !border-b !border-[#DBDBDB]'
                     >
                         <TableCell className='!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="center">
-                            <TextLoading width={15} height={18} loading={false}>
+                            <TextLoading width={15} height={18} loading={loading}>
                                 {idx + 1}
                             </TextLoading>
                         </TableCell>
                         <TableCell className='!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' component="th" scope="row">
                             <div className='flex items-center justify-start gap-[8px] !text-nowrap'>
-                                <CircularLoading width={32} height={32} loading={false}>
+                                <CircularLoading width={32} height={32} loading={loading}>
                                     <Image
                                         src={row.image}
                                         alt='doctor'
@@ -37,28 +38,28 @@ function List({ data }) {
                                         width={32}
                                     />
                                 </CircularLoading>
-                                <TextLoading width={40} height={18} loading={false}>
+                                <TextLoading width={40} height={18} loading={loading}>
                                     {row.name}
                                 </TextLoading>
                             </div>
                         </TableCell>
                         <TableCell className='!text-[#616161] !text-[16px] !font-medium !text-start !pr-[18px] !text-nowrap' align="right">
-                            <TextLoading width={50} height={18} loading={false}>
+                            <TextLoading width={50} height={18} loading={loading}>
                                 {row.expertise}
                             </TextLoading>
                         </TableCell>
                         <TableCell className='!text-[#616161] !text-[16px] !font-medium !text-start !pr-[18px] !text-nowrap' align="left">
-                            <TextLoading width={50} height={18} loading={false}>
+                            <TextLoading width={50} height={18} loading={loading}>
                                 {row.date}
                             </TextLoading>
                         </TableCell>
                         <TableCell className='!text-[#616161] !text-[16px] !font-medium !text-center !pr-[18px] !text-nowrap' align="right">
-                            <TextLoading width={50} height={18} loading={false}>
+                            <TextLoading width={50} height={18} loading={loading}>
                                 {row.hour}
                             </TextLoading>
                         </TableCell>
                         <TableCell className='!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="left">
-                            <CustomLoading width={80} height={22} loading={false}>
+                            <CustomLoading width={80} height={22} loading={loading}>
                                 {row.number_of_turns}
                             </CustomLoading>
                         </TableCell>
@@ -72,4 +73,4 @@ function List({ data }) {
     )
 }
 
-export default List
+export default Table

components/panel/turns/list/index.js

@@ -0,0 +1,13 @@
+import ColTable from "../../ColTable"
+import Table from "./Table"
+
+function List({ data, loading }) {
+    return (
+        <div className="mt-[32px] pb-[20px] table-rounded-8">
+            <Table data={data} loading={loading} />
+            <ColTable data={data.list_of_doctors_appointments} loading={loading} />
+        </div>
+    )
+}
+
+export default List

components/panel/userAccount/form/index.js

@@ -36,8 +36,8 @@ function Form() {
         });
 
     return (
-        <div className="flex flex-col items-start justify-start gap-[48px]">
-            <ul className="grid w-full grid-cols-1 md:grid-cols-2 mt-[24px] md:mt-[28px] lg:mt-[32px] gap-x-[48px] gap-y-[32px]">
+        <div className="flex flex-col items-start justify-start gap-[32px] md:gap-[40px] lg:gap-[48px]">
+            <ul className="grid w-full grid-cols-1 md:grid-cols-2 mt-[24px] md:mt-[28px] lg:mt-[32px] gap-x-[48px] gap-y-[24px] md:gap-y-[28px] lg:gap-y-[32px]">
                 <ContentText text='نام و نام خانوادگی'>
                     <EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.name} name='name' />
                 </ContentText>