handle download poster and qrcode, fix to show timestamp, add pagination to doctors page

app/component/ItemDoctor.js

@@ -4,7 +4,6 @@ import Link from "next/link";
 import CustomLoading from "./loading/Custom";
 import TextLoading from "./loading/Text";
 import CircularLoading from "./loading/Circular";
-import moment from "moment-jalaali";
 
 // Icons
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
@@ -13,9 +12,7 @@ import LikeD from "@/components/icons/LikeD";
 import PointD from "@/components/icons/PointD";
 import { convertTimestampToPersianDateSimple } from "@/helper";
 
-moment.loadPersian({ dialect: "persian-modern" });
-
-function ItemDoctor({ doctor, setDoctors }) {
+function ItemDoctor({ doctor, loading, setDoctors }) {
   const handleLoading = () => {
     setDoctors((prevDoctors) =>
       prevDoctors.map((item) =>
@@ -30,24 +27,24 @@ function ItemDoctor({ doctor, setDoctors }) {
     <li className="p-4 relative rounded-lg bg-[#FFF] border border-[#EFEFEF]">
       {/* Detail Doctor */}
       <div className="flex items-center justify-start gap-2.5">
-        <CircularLoading width={66} height={66}>
+        <CircularLoading loading={loading} width={66} height={66}>
           <Image
             width={72}
             height={72}
             alt="image-doctor"
-            src={doctor?.img[0]?.url}
+            src={doctor?.img && doctor?.img[0]?.url}
             className="object-contain rounded-full w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
           />
         </CircularLoading>
         <div className="flex flex-col items-start justify-center gap-2">
-          <TextLoading width={90} height={15}>
+          <TextLoading loading={loading} width={90} height={15}>
             <Link href={`/doctor/${doctor?.uuid}`}>
               <p className="text-[#3B3B3B] text-[14px] font-bold">
                 {doctor?.name}
               </p>
             </Link>
           </TextLoading>
-          <TextLoading width={120} height={15}>
+          <TextLoading loading={loading} width={120} height={15}>
             <p className="text-[#616161] text-[14px] font-normal">
               تخصص:
               {doctor?.specialties?.map(
@@ -56,7 +53,7 @@ function ItemDoctor({ doctor, setDoctors }) {
               )}
             </p>
           </TextLoading>
-          <CustomLoading width={100} height={25}>
+          <CustomLoading loading={loading} width={100} height={25}>
             <div className="flex rounded items-center justify-start gap-2">
               <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
                 <LikeD />
@@ -78,13 +75,13 @@ function ItemDoctor({ doctor, setDoctors }) {
       {/* Hours of work */}
       <div className="flex my-4 items-center justify-start gap-0.5">
         <ClockD />
-        <TextLoading width={150} height={15}>
+        <TextLoading loading={loading} width={150} height={15}>
           <p className="text-[#7E7E7E] text-[12px] font-normal">
             ساعت کاری: {doctor?.hours_of_work}
           </p>
         </TextLoading>
       </div>
-      <CustomLoading width={150} height={20}>
+      <CustomLoading loading={loading} width={150} height={20}>
         <p
           className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
                     ${