change layout and router panel & design page dashboard and user account

components/doctors/modal/Content.js

@@ -20,15 +20,22 @@ function Content({ data, setData }) {
                 updateData={(event) => changeData(event.target.innerText, 'expertise')}
                 list={specialties}
                 name='expertise'
-                label='تخصص'
+                label='دسته بندی'
             />
+            <div className="mt-[24px]">
+                <AutoCompleteSelect
+                    updateData={(event) => changeData(event.target.innerText, 'expertise')}
+                    list={specialties}
+                    name='expertise'
+                    label='تخصص'
+                />
+            </div>
             <div className="mt-[40px] mb-[32px]">
                 <RadioContent
                     changeData={(value) => changeData(+value, 'gender')}
                     value={data.gender}
                     text='جنسیت پزشک'
                     group={group1}
-
                 />
                 <span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
                 <RadioContent

components/doctors/modal/FilterModal.js

@@ -23,10 +23,11 @@ function FilterModal({ data, setData, children }) {
             <Modal
                 open={open}
                 onClose={handleClose}
+                className=" !overflow-hidden !max-h-[calc(100vh-16px)]"
             >
                 <div
                     style={styleDefault}
-                    className="!px-[16px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+                    className="!px-[16px] !my-[12px] overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
                     !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between"
                 >
                     <div>

components/doctors/modal/RadioContent.js

@@ -4,11 +4,13 @@ function RadioContent({ group, text, value, changeData }) {
     return (
         <div>
             <p className="text-[16px] font-medium text-[#3B3B3B]">{text}</p>
-            <Radios
-                changeData={changeData}
-                group={group}
-                value={value}
-            />
+            <div className="mt-[16px]">
+                <Radios
+                    changeData={changeData}
+                    group={group}
+                    value={value}
+                />
+            </div>
         </div>
     )
 }