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}
                         />