handle limit page dashboard & change header profile user & get data from api in page clinics & clinic item and doctor item
This commit is contained in:
@@ -17,17 +17,17 @@ function ItemAppointment({ turn, doctor, loading }) {
|
||||
<span className="block w-full h-px bg-[#EFEFEF] my-4"></span>
|
||||
<div className="flex items-center justify-start gap-3">
|
||||
<CircularLoading width={56} height={56} loading={loading}>
|
||||
<Image src={doctor.img} width={56} height={56} alt="doctor" />
|
||||
<Image src={doctor?.img} width={56} height={56} alt="doctor" />
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-2">
|
||||
<TextLoading width={60} height={15} loading={loading}>
|
||||
<p className="text-[#3B3B3B] text-[14px] font-bold">
|
||||
{doctor.name}
|
||||
{doctor?.name}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading width={65} height={15} loading={loading}>
|
||||
<p className="text-[#525252] text-[14px] font-medium">
|
||||
تخصص: {doctor.expertise}
|
||||
تخصص: {doctor?.expertise}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
|
||||
@@ -15,7 +15,7 @@ function Title({ doctor, loading }) {
|
||||
w-[40px] sm:w-[81px] md:w-[123px] lg:w-[164px]
|
||||
h-[40px] sm:h-[81px] md:h-[123px] lg:h-[164px]
|
||||
"
|
||||
src={doctor.img}
|
||||
src={doctor?.img}
|
||||
alt="img-doctor"
|
||||
height={164}
|
||||
width={164}
|
||||
@@ -24,18 +24,18 @@ function Title({ doctor, loading }) {
|
||||
<div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">
|
||||
<TextLoading loading={loading} width={90} height={20}>
|
||||
<h1 className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
|
||||
{doctor.name}
|
||||
{doctor?.title}
|
||||
</h1>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={100} height={20}>
|
||||
<h3 className="text-[#525252] text-[14px] md:text-[16px] font-medium">
|
||||
تخصص: {doctor.expertise}
|
||||
تخصص: {doctor?.expertise}
|
||||
</h3>
|
||||
</TextLoading>
|
||||
<div className="flex items-center justify-start gap-11">
|
||||
<TextLoading loading={loading} width={60} height={20}>
|
||||
<p className="text-[#525252] text-[16px] font-medium">
|
||||
{doctor.experience} سال تجربه
|
||||
{doctor?.experience} سال تجربه
|
||||
</p>
|
||||
</TextLoading>
|
||||
<div className="flex items-center gap-1">
|
||||
@@ -44,7 +44,7 @@ function Title({ doctor, loading }) {
|
||||
</div>
|
||||
<TextLoading loading={loading} width={120} height={20}>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-medium">
|
||||
کد نظام پزشکی: {doctor.medical_system_code}
|
||||
کد نظام پزشکی: {doctor?.medical_system_code}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
@@ -54,13 +54,13 @@ function Title({ doctor, loading }) {
|
||||
<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}
|
||||
امتیاز: {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}% رضایت کاربران
|
||||
{doctor?.satisfaction}% رضایت کاربران
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -28,7 +28,7 @@ function AboutDcotor({ doctor, loading }) {
|
||||
}
|
||||
`}
|
||||
>
|
||||
{doctor.detail}
|
||||
{doctor?.detail}
|
||||
</p>
|
||||
<Button
|
||||
className="!text-[#F17732] md:!hidden !text-[14px] !font-light !p-2"
|
||||
@@ -44,7 +44,7 @@ function AboutDcotor({ doctor, loading }) {
|
||||
تخصص ها
|
||||
</p>
|
||||
<ul className="flex flex-col mt-[12px] sm:flex-row gap-y-[16px] items-start sm:items-center justify-start gap-4">
|
||||
{doctor.specialties.map((item, idx) => (
|
||||
{doctor?.specialties?.map((item, idx) => (
|
||||
<li key={idx} className="flex items-center justify-start gap-1">
|
||||
<span className="w-2 h-2 bg-[#F17732] rounded-full"></span>
|
||||
<TextLoading loading={loading} width={70} height={18}>
|
||||
|
||||
@@ -8,7 +8,7 @@ function ProgressAll({ doctor, loading }) {
|
||||
<CircularLoading loading={loading} width={120} height={120}>
|
||||
<CircularProgress
|
||||
variant="determinate"
|
||||
value={doctor.total_user_satisfaction}
|
||||
value={doctor?.total_user_satisfaction}
|
||||
sx={{
|
||||
"& .MuiCircularProgress-circle": {
|
||||
stroke: "#05BA58",
|
||||
@@ -28,7 +28,7 @@ function ProgressAll({ doctor, loading }) {
|
||||
رضایت کاربران
|
||||
</p>
|
||||
<p className="text-[#3B3B3B]">
|
||||
{numberToArStyle(doctor.total_user_satisfaction)}%
|
||||
{numberToArStyle(doctor?.total_user_satisfaction)}%
|
||||
</p>
|
||||
</div>
|
||||
</CircularLoading>
|
||||
|
||||
@@ -5,7 +5,6 @@ import LikeDI from "@/components/icons/LikeDI";
|
||||
import ProgressDetail from "@/app/component/ProfressDetail";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
|
||||
function Chart({ doctor, loading }) {
|
||||
return (
|
||||
@@ -18,10 +17,10 @@ function Chart({ doctor, loading }) {
|
||||
<TextLoading loading={loading} width={130} height={20}>
|
||||
<div className="flex items-center justify-start gap-2.5">
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
امتیاز کلی کاربران: {doctor.overall_score} از 5
|
||||
امتیاز کلی کاربران: {doctor?.overall_score} از 5
|
||||
</p>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
(از مجموع {doctor.comments.length} نظر)
|
||||
(از مجموع {doctor?.comments?.length} نظر)
|
||||
</p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
@@ -41,13 +40,13 @@ function Chart({ doctor, loading }) {
|
||||
<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}
|
||||
امتیاز: {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}% رضایت کاربران
|
||||
{doctor?.satisfaction}% رضایت کاربران
|
||||
</p>
|
||||
</div>
|
||||
</CustomLoading>
|
||||
@@ -58,7 +57,7 @@ function Chart({ doctor, loading }) {
|
||||
loading ? "lg:w-full" : "lg:w-fit"
|
||||
}`}
|
||||
>
|
||||
{doctor.progress_detail.map((item, idx) => (
|
||||
{doctor?.progress_detail?.map((item, idx) => (
|
||||
<TextLoading width="full" key={idx} height={20} loading={loading}>
|
||||
<ProgressDetail data={item} />
|
||||
</TextLoading>
|
||||
|
||||
@@ -48,7 +48,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) => (
|
||||
{doctor?.progress_detail?.map((item, idx) => (
|
||||
<ProgressChange data={item} key={idx} />
|
||||
))}
|
||||
</ul>
|
||||
@@ -59,7 +59,7 @@ function ModalAnswer({ doctor }) {
|
||||
multiline={true}
|
||||
title="نظر خود را بنویسید..."
|
||||
/>
|
||||
<Link href={`/booking/${doctor.id}`} className="!mr-auto">
|
||||
<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] !shadownon"
|
||||
|
||||
@@ -8,11 +8,11 @@ function Locations({ doctor, loading }) {
|
||||
موقعیت مکانی{" "}
|
||||
</p>
|
||||
<ul className="flex w-full mt-[24px] flex-col justify-center items-start">
|
||||
{doctor.locations.map((item, idx) => (
|
||||
{doctor?.locations?.map((item, idx) => (
|
||||
<CustomLoading key={idx} loading={loading} width="full" height={40}>
|
||||
<li className="w-full">
|
||||
<Item data={item} />
|
||||
{doctor.locations.length > idx + 1 && (
|
||||
{doctor?.locations.length > idx + 1 && (
|
||||
<span className="w-full h-px bg-[#EFEFEF] block my-[12px] md:my-[14px] lg:my-[16px]"></span>
|
||||
)}
|
||||
</li>
|
||||
|
||||
@@ -1,29 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import AppointmentList from "./appointmentList";
|
||||
import DetailDoctor from "./detailDoctor";
|
||||
import Share from "./detailDoctor/Share";
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
|
||||
function DoctorPage({ doctor }) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">
|
||||
<div className="flex items-center justify-between">
|
||||
<CustomLoading loading={loading} width={180} height={25}>
|
||||
<CustomLoading loading={false} width={180} height={25}>
|
||||
<div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
|
||||
<h2 className="text-[#9B9B9B] text-nowrap">
|
||||
متخصص {doctor.expertise} {" >"}
|
||||
متخصص {doctor?.expertise} {" >"}
|
||||
</h2>
|
||||
<p className="text-[#525252] text-nowrap mr-1">{doctor.name}</p>
|
||||
<p className="text-[#525252] text-nowrap mr-1">{doctor?.title}</p>
|
||||
</div>
|
||||
</CustomLoading>
|
||||
<div className="flex lg:hidden">
|
||||
@@ -31,8 +20,8 @@ function DoctorPage({ doctor }) {
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start justify-center gap-6 mt-[30px]">
|
||||
<DetailDoctor doctor={doctor} loading={loading} />
|
||||
<AppointmentList doctor={doctor} loading={loading} />
|
||||
<DetailDoctor doctor={doctor} loading={false} />
|
||||
<AppointmentList doctor={doctor} loading={false} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -9,7 +9,7 @@ function Services({ data }) {
|
||||
<p className="text-[#E7EEF6] text-[20px] font-semibold">خدمات:</p>
|
||||
</div>
|
||||
<ul className="flex flex-col justify-start items-start gap-[16px] mt-[16px] font-normal ">
|
||||
{data.specialties.map((item, idx) => (
|
||||
{data?.specialties?.map((item, idx) => (
|
||||
<li key={idx} className="flex items-center justify-start gap-[4px]">
|
||||
<CircleOrangeSm />
|
||||
<p className="text-[16px] font-normal text-[#E7EEF6]">{item}</p>
|
||||
|
||||
Reference in New Issue
Block a user