style chart detail doctor

components/doctor/detailDoctor/cards/LocationDoctor.js

@@ -10,7 +10,7 @@ function LocationDoctor({ doctor }) {
                 <p className="text-[#525252] text-[16px] font-normal">روزهای کاری: {doctor.hours_of_work}</p>
             </div>
             <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12959.6445083469!2d51.33890241984384!3d35.70380456224644!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f8dfe05732c2e91%3A0xfcbec017befd15f4!2sAzadi%20Tower!5e0!3m2!1sen!2snl!4v1700601294504!5m2!1sen!2snl"
-                className='w-full xl:w-1/2 h-80 rounded-lg my-4'
+                className='w-full h-[470px] rounded-lg my-4'
                 allowFullScreen=""
                 loading="lazy"
                 referrerPolicy="no-referrer-when-downgrade"

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

@@ -1,12 +0,0 @@
-function Chart({ doctor }) {
-    return (
-        <div className='rounded-lg border border-[#EFEFEF] bg-[#FFF] pt-4 pb-6 px-6'>
-            <div className='flex items-center justify-start gap-2.5'>
-                <p className="text-[#616161] text-[14px] font-medium">امتیاز کلی کاربران: {doctor.overall_score} از 5</p>
-                <p>(از مجموع 234 نظر)</p>
-            </div>
-        </div>
-    )
-}
-
-export default Chart

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

@@ -0,0 +1,32 @@
+import { numberToArStyle } from "@/helper"
+import { CircularProgress } from "@mui/material"
+
+function ProgressAll({ doctor }) {
+    return (
+        <div className="w-full h-fit relative">
+            <CircularProgress
+                variant="determinate"
+                value={doctor.total_user_satisfaction}
+                sx={{
+                    '& .MuiCircularProgress-circle': {
+                        stroke: '#05BA58',
+                        strokeLinecap: 'round'
+                    },
+                    '& .MuiCircularProgress-svg': {
+                        borderRadius: '50%',
+                        boxShadow: 'inset 0 0 0 11px #D7D7D7'
+                    }
+                }}
+                className="!w-full !h-full"
+            />
+            <div
+                className="flex flex-col justify-center items-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 gap-1"
+            >
+                <p className="text-[#525252] text-[12px] font-normal text-center">مجموع<br />رضایت کاربران</p>
+                <p>{numberToArStyle(doctor.total_user_satisfaction)}%</p>
+            </div>
+        </div>
+    )
+}
+
+export default ProgressAll

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,34 @@
+import { Rating } from "@mui/material"
+import Progress from "./ProgressDetail"
+import ProgressAll from "./ProgressAll"
+
+function Chart({ doctor }) {
+    return (
+        <div className='rounded-lg my-6 border border-[#EFEFEF] bg-[#FFF] pt-4 pb-6 px-6'>
+            <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>
+            </div>
+            <Rating
+                readOnly
+                value={4}
+                size="small"
+                name="read-only"
+                className="!mt-4 !mb-6"
+            />
+            <div className="flex items-center justify-center gap-[50px]">
+                <ul className="flex flex-col items-start justify-start gap-1.5">
+                    {doctor.progress_detail.map((item, idx) => (
+                        <Progress
+                            data={item}
+                            key={idx}
+                        />
+                    ))}
+                </ul>
+                <ProgressAll doctor={doctor} />
+            </div>
+        </div>
+    )
+}
+
+export default Chart

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

@@ -1,5 +1,5 @@
 import { Button } from '@mui/material'
-import Chart from './Chart'
+import Chart from './chart'
 
 function Comments({ doctor }) {
     return (

helper/index.js

@@ -0,0 +1 @@
+export const numberToArStyle = num => num.toLocaleString('ar-AE')