feat(doctor-avatar): enhance DoctorAvatar component with initials formatting and integrate into ItemAppointment

app/component/DoctorAvatar.js

@@ -3,10 +3,11 @@ import { imageUrl } from "@/helper";
 
 function getInitials(name) {
   if (!name) return "";
-  const parts = name.trim().split(/\s+/).filter(Boolean);
+  const cleanName = name.trim().replace(/^دکتر\s+/, "");
+  const parts = cleanName.split(/\s+/).filter(Boolean);
   if (parts.length === 0) return "";
   if (parts.length === 1) return parts[0][0];
-  return `${parts[0][0]}${parts[1][0]}`;
+  return `${parts[0][0]} - ${parts[1][0]}`;
 }
 
 function DoctorAvatar({ doctor, size = 72, className = "", priority = false }) {
@@ -18,7 +19,9 @@ function DoctorAvatar({ doctor, size = 72, className = "", priority = false }) {
         style={{ width: size, height: size }}
         className={`flex items-center justify-center rounded-full bg-[#F8F8FF] text-[#3B3B3B] font-bold select-none ${className}`}
       >
-        <span style={{ fontSize: size * 0.32 }}>{getInitials(doctor?.name)}</span>
+        <span style={{ fontSize: size * 0.22 }} className="whitespace-nowrap">
+          {getInitials(doctor?.name)}
+        </span>
       </div>
     );
   }

components/doctor/appointmentList/ItemAppointment.js

@@ -3,9 +3,8 @@ import TextLoading from "@/app/component/loading/Text";
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
 import GreenCalendarTurn from "@/components/icons/GreenCalendarTurn";
 import { Button } from "@mui/material";
-import Image from "next/image";
 import Link from "next/link";
-import { imageUrl } from "@/helper";
+import DoctorAvatar from "@/app/component/DoctorAvatar";
 
 function ItemAppointment({ turn, loading, doctorSlug }) {
   return (
@@ -17,13 +16,7 @@ function ItemAppointment({ turn, loading, doctorSlug }) {
       <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
-            className="rounded-full"
-            width={56}
-            height={56}
-            alt="doctor"
-            src={imageUrl(turn?.img?.[0]?.url)}
-          />
+          <DoctorAvatar doctor={turn} size={56} />
         </CircularLoading>
         <div className="flex flex-col items-start justify-center gap-2">
           <TextLoading width={60} height={15} loading={loading}>