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

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': {