style chart detail doctor

2024-07-07 23:24:38 +03:30
parent 0bf9dc5430
commit c57efe643a
8 changed files with 1197 additions and 14 deletions
@@ -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
@@ -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
@@ -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