handle limit page dashboard & change header profile user & get data from api in page clinics & clinic item and doctor item

components/clinic/components/about/ListBime.js

@@ -27,7 +27,7 @@ function ListBime({ data, loading }) {
         ref={list}
         className="flex overflow-auto hidden-scroll mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]"
       >
-        {data.list_bime.map((item, idx) => (
+        {data?.list_bime?.map((item, idx) => (
           <CustomLoading width={156} height={110} loading={loading}>
             <li
               key={idx}

components/clinic/components/about/Services.js

@@ -9,7 +9,7 @@ function Services({ data, loading }) {
     gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px] 
     gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
     >
-      {data.specialties.map((item, idx) => (
+      {data?.specialties?.map((item, idx) => (
         <li key={idx} className="flex items-start justify-start gap-2">
           <div className="min-w-[24px] min-h-[24px]">
             <TickCircleOrange />

components/clinic/components/about/Specialties.js

@@ -9,7 +9,7 @@ function Specialties({ data, loading }) {
         gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px] 
         gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
     >
-      {data.specialties.map((item, idx) => (
+      {data?.specialties?.map((item, idx) => (
         <li key={idx} className="flex items-start justify-start gap-2">
           <div className="min-w-[24px] min-h-[24px]">
             <TickCircleOrange />

components/clinic/components/about/images/Images.js

@@ -15,7 +15,7 @@ function Images({ data, loading }) {
         <CustomLoading loading={loading} width={600} height={400}>
           <Image
             className="rounded-[8px] overflow-hidden"
-            src={data.images_clinic[0]}
+            src={data?.images_clinic && !!data?.images_clinic.length && data?.images_clinic[0] || ""}
             alt="img clinic"
             height={432}
             width={600}

components/clinic/components/about/images/List.js

@@ -8,7 +8,12 @@ function List({ data, loading }) {
         <CustomLoading loading={loading} width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
-            src={data.images_clinic[1]}
+            src={
+              (data?.images_clinic &&
+                !!data?.images_clinic.length &&
+                data?.images_clinic[1]) ||
+              ""
+            }
             alt="img clinic"
             height={204}
             width={288}
@@ -19,7 +24,12 @@ function List({ data, loading }) {
         <CustomLoading loading={loading} width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
-            src={data.images_clinic[2]}
+            src={
+              (data?.images_clinic &&
+                !!data?.images_clinic.length &&
+                data?.images_clinic[2]) ||
+              ""
+            }
             alt="img clinic"
             height={204}
             width={288}
@@ -30,7 +40,12 @@ function List({ data, loading }) {
         <CustomLoading loading={loading} width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
-            src={data.images_clinic[3]}
+            src={
+              (data?.images_clinic &&
+                !!data?.images_clinic.length &&
+                data?.images_clinic[3]) ||
+              ""
+            }
             alt="img clinic"
             height={204}
             width={288}
@@ -41,7 +56,12 @@ function List({ data, loading }) {
         <CustomLoading loading={loading} width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
-            src={data.images_clinic[4]}
+            src={
+              (data?.images_clinic &&
+                !!data?.images_clinic.length &&
+                data?.images_clinic[4]) ||
+              ""
+            }
             alt="img clinic"
             height={204}
             width={288}

components/clinic/components/about/images/Slider.js

@@ -4,20 +4,22 @@ import Image from "next/image";
 function Slider({ data, loading }) {
   return (
     <ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll">
-      {[...data.images_clinic, ...data.images_clinic].map((item, idx) =>
-        idx !== 0 ? (
-          <CustomLoading width={90} height={90} loading={loading}>
-            <Image
-              key={idx}
-              src={item}
-              width={90}
-              height={90}
-              alt="image clinic"
-              className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden"
-            />
-          </CustomLoading>
-        ) : undefined,
-      )}
+      {data &&
+        data.images_clinic &&
+        [...data?.images_clinic, ...data?.images_clinic]?.map((item, idx) =>
+          idx !== 0 ? (
+            <CustomLoading width={90} height={90} loading={loading}>
+              <Image
+                key={idx}
+                src={item}
+                width={90}
+                height={90}
+                alt="image clinic"
+                className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden"
+              />
+            </CustomLoading>
+          ) : undefined
+        )}
     </ul>
   );
 }

components/clinic/components/about/index.js

@@ -33,7 +33,7 @@ function About({ data, loading }) {
                             : "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]"
                         }
                     `}
-              dangerouslySetInnerHTML={{ __html: data.caption }}
+              dangerouslySetInnerHTML={{ __html: data?.caption }}
             ></p>
           </MultilineLoading>
           <Button