design and responsive page doctor and account

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

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

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

@@ -1,24 +0,0 @@
-import { numberToArStyle } from "@/helper"
-import { LinearProgress } from "@mui/material"
-
-function Progress({ data }) {
-    return (
-        <li className="flex items-center justify-start gap-2">
-            <p className="text-[#525252] text-[14px] font-normal w-[118px]">{data.label}</p>
-            <LinearProgress
-                value={data.progress}
-                variant="determinate"
-                className="!w-[265px] !rounded-[10px] !bg-[#D7D7D7] !h-[11px]"
-                sx={{
-                    '& .MuiLinearProgress-bar': {
-                        background: '#05BA58',
-                        borderRadius: '10px'
-                    }
-                }}
-            />
-            <p className="text-[#525252] text-[20px] font-medium">{numberToArStyle(data.progress)}%</p>
-        </li>
-    )
-}
-
-export default Progress

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

@@ -1,10 +1,15 @@
 import { Rating } from "@mui/material"
-import Progress from "./ProgressDetail"
 import ProgressAll from "./ProgressAll"
+import StarDI from "@/components/icons/StarDI"
+import LikeDI from "@/components/icons/LikeDI"
+import ProgressDetail from "@/app/component/ProfressDetail"
 
 function Chart({ doctor }) {
     return (
-        <div className='rounded-lg my-6 border border-[#EFEFEF] bg-[#FFF] pt-4 pb-6 px-6'>
+        <div className='
+            rounded-lg my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] border border-[#EFEFEF] bg-[#FFF] 
+            pt-[12px] md:pt-[14px] lg:pt-[16px] pb-[12px] sm:pb-[16px] md:pb-[20px] lg:pb-[24px] px-[12px] sm:px-[16px] md:px-[20px] lg:px-[24px]
+        '>
             <div className='flex items-center justify-start gap-2.5'>
                 <p className="text-[#616161] text-[14px] font-medium">امتیاز کلی کاربران: {doctor.overall_score} از 5</p>
                 <p className="text-[#7E7E7E] text-[14px] font-normal">(از مجموع {doctor.comments.length} نظر)</p>
@@ -14,12 +19,22 @@ function Chart({ doctor }) {
                 value={4}
                 size="small"
                 name="read-only"
-                className="!mt-4 !mb-6"
+                className="!mt-4 !mb-6 !hidden lg:!flex"
             />
+            <div className="flex items-center justify-start gap-2 my-[12px]">
+                <div className="flex p-1 gap-0.5 items-start justify-center">
+                    <StarDI />
+                    <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">امتیاز: {doctor.point}</p>
+                </div>
+                <div className="flex p-1 items-start gap-0.5">
+                    <LikeDI />
+                    <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]">
-                <ul className="flex flex-col items-start justify-start gap-1.5">
+                <ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
                     {doctor.progress_detail.map((item, idx) => (
-                        <Progress
+                        <ProgressDetail
                             data={item}
                             key={idx}
                         />

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

@@ -1,23 +1,19 @@
 import { Button } from '@mui/material'
 import Chart from './chart'
 import Comment from '@/app/component/comment'
+import ModalAnswer from './modal/ModalAnswer'
 
 function Comments({ doctor }) {
     return (
-        <div className='mt-8'>
+        <div className='mt-[24px] sm:mt-[27px] md:mt-[29px] lg:mt-[32px]'>
             <a
                 id="comments"
                 className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
             ></a>
-            <div>
-                <p className="text-[#525252] text-[20px] font-bold">نظرات کاربران </p>
-            </div>
-            <div className='mt-8 flex items-center justify-start'>
+            <p className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold">نظرات کاربران </p>
+            <div className='mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[32px] flex flex-col md:flex-row gap-y-[20px] items-start md:items-center justify-start'>
                 <p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را در مورد این پزشک به اشتراک بگذارید:</p>
-                <Button
-                    variant='outlined'
-                    className='!py-2.5 !px-9 !mr-4 !rounded'
-                >ثبت نظر</Button>
+                <ModalAnswer doctor={doctor} />
             </div>
             <Chart doctor={doctor} />
             <Comment data={doctor} />

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

@@ -0,0 +1,66 @@
+'use client';
+
+import { useState } from "react";
+import { styleDefault } from "@/mui";
+import { Box, Button, Modal, Rating, TextField } from "@mui/material";
+import CloseModalD from "@/components/icons/CloseModalD";
+import ProgressDetail from "@/app/component/ProfressDetail";
+import Field from "@/app/component/Field";
+
+function ModalAnswer({ doctor }) {
+
+    const [open, setOpen] = useState(true);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+    return (
+        <>
+            <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'
+            >ثبت نظر</Button>
+            <Modal
+                open={open}
+                onClose={handleClose}
+            >
+                <Box
+                    sx={styleDefault}
+                    className="!w-full !h-full md:!w-fit md:!h-fit !px-[24px] !pt-[13px] !pb-[30px]"
+                >
+                    <div className="w-full flex justify-end">
+                        <CloseModalD />
+                    </div>
+                    <p className="text-[16px]">امتیاز شما به دکتر مهران امینی</p>
+                    <Rating
+                        className="!my-[24px]"
+                        sx={{
+                            '& .MuiSvgIcon-root': {
+                                width: '12px',
+                                height: '12px'
+                            }
+                        }}
+                    />
+                    <ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
+                        {doctor.progress_detail.map((item, idx) => (
+                            <ProgressDetail
+                                data={item}
+                                key={idx}
+                            />
+                        ))}
+                    </ul>
+                    <div className="flex flex-col justify-center items-start mt-[24px]">
+                        <p className='text-[#495057] text-[16px] font-bold'>متن نظر</p>
+                        <Field
+                            type='number'
+                            multiline={true}
+                            title='نظر خود را بنویسید...'
+                        />
+                    </div>
+                </Box>
+            </Modal>
+        </>
+    )
+}
+
+export default ModalAnswer