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:
Ehsan
2025-06-01 01:08:25 +03:30
parent 80c74361eb
commit e292176a61
45 changed files with 223 additions and 258 deletions
@@ -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>
+7 -7
View File
@@ -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>
+5 -16
View File
@@ -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>
);
+1 -1
View File
@@ -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>