change design and responsive & pay & detail account & success pay & faield pay & doctor id

components/doctor/detailDoctor/cards/comments/chart/ProgressAll.js

@@ -3,7 +3,7 @@ import { CircularProgress } from "@mui/material"
 
 function ProgressAll({ doctor }) {
     return (
-        <div className="hidden lg:flex w-full h-fit relative">
+        <div className="hidden lg:flex w-full h-fit relative min-w-[145px] max-w-[150px]">
             <CircularProgress
                 variant="determinate"
                 value={doctor.total_user_satisfaction}

components/doctor/detailDoctor/cards/comments/chart/index.js

@@ -31,7 +31,7 @@ function Chart({ doctor }) {
                     <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
                 </div>
             </div>
-            <div className="flex items-center justify-center gap-[50px]">
+            <div className="flex flex-wrap items-center justify-center gap-[50px]">
                 <ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
                     {doctor.progress_detail.map((item, idx) => (
                         <ProgressDetail

components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js

@@ -2,14 +2,16 @@
 
 import { useState } from "react";
 import { styleDefault } from "@/mui";
-import { Box, Button, Modal, Rating, TextField } from "@mui/material";
+import { Box, Button, Modal, Rating, Slider } from "@mui/material";
 import CloseModalD from "@/components/icons/CloseModalD";
-import ProgressDetail from "@/app/component/ProfressDetail";
 import Field from "@/app/component/Field";
+import ArrowLeftD from "@/components/icons/ArrowLeftD";
+import ProgressChange from "@/app/component/ProgressChange";
+import Link from "next/link";
 
 function ModalAnswer({ doctor }) {
 
-    const [open, setOpen] = useState(true);
+    const [open, setOpen] = useState(false);
     const handleOpen = () => setOpen(true);
     const handleClose = () => setOpen(false);
 
@@ -18,7 +20,8 @@ function ModalAnswer({ doctor }) {
             <Button
                 variant='outlined'
                 onClick={handleOpen}
-                className='!py-2 md:!py-2.5 !px-[16px] sm:!px-[23px] md:!px-[29px] lg:!px-[36px] !mr-0 md:!mr-4 !rounded !w-full'
+                className='!py-2 md:!py-2.5 !px-[16px] sm:!px-[23px] md:!px-[29px] 
+                lg:!px-[36px] !mr-0 md:!mr-4 !rounded !w-full md:!w-fit'
             >ثبت نظر</Button>
             <Modal
                 open={open}
@@ -26,9 +29,12 @@ function ModalAnswer({ doctor }) {
             >
                 <Box
                     sx={styleDefault}
-                    className="!w-full !h-full md:!w-fit md:!h-fit !px-[24px] !pt-[13px] !pb-[30px]"
+                    className="!w-full !h-full md:!w-fit md:!h-fit !px-[24px] !pt-[13px] !pb-[30px] !rounded-none md:!rounded-lg"
                 >
-                    <div className="w-full flex justify-end">
+                    <div
+                        className="w-full flex justify-end cursor-pointer"
+                        onClick={handleClose}
+                    >
                         <CloseModalD />
                     </div>
                     <p className="text-[16px]">امتیاز شما به دکتر مهران امینی</p>
@@ -43,7 +49,7 @@ function ModalAnswer({ doctor }) {
                     />
                     <ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
                         {doctor.progress_detail.map((item, idx) => (
-                            <ProgressDetail
+                            <ProgressChange
                                 data={item}
                                 key={idx}
                             />
@@ -56,6 +62,20 @@ function ModalAnswer({ doctor }) {
                             multiline={true}
                             title='نظر خود را بنویسید...'
                         />
+                        <Link
+                            href={`/booking/${doctor.id}`}
+                            className="!mr-auto"
+                        >
+                            <Button
+                                variant='contained'
+                                className='!py-2.5 !px-4 gap-1 !text-[14px] !font-medium !mt-[32px]'
+                            >
+                                دریافت نوبت
+                                <div className='w-[20px] h-[20px]'>
+                                    <ArrowLeftD />
+                                </div>
+                            </Button>
+                        </Link>
                     </div>
                 </Box>
             </Modal>