responsive page user-account & add-doctor & turns & add loading to all page panel & change design page dashboard

components/dashboard/userAccount/tabs/comments/Comment.js

@@ -7,7 +7,7 @@ import TextLoading from "@/app/component/loading/Text"
 import CustomLoading from "@/app/component/loading/Custom"
 import MultilineLoading from "@/app/component/loading/Multiline"
 
-function Comment({ data, loading }) {
+function Comment({ data, loading, idx, length }) {
     return (
         <li className="flex flex-col gap-[8px] w-full">
             <div className="flex items-start justify-between w-full">
@@ -57,7 +57,9 @@ function Comment({ data, loading }) {
                     <p className="text-[#7E7E7E] text-[12px] font-normal">{data.date}</p>
                 </TextLoading>
             </div>
-            <span className="w-full block h-px bg-[#EFEFEF] mt-0 md:mt-[4px] mt-[8px]"></span>
+            {length > idx + 1 && (
+                <span className="w-full block h-px bg-[#EFEFEF] mt-0 md:mt-[4px] lg:mt-[8px]"></span>
+            )}
         </li>
     )
 }

components/dashboard/userAccount/tabs/comments/index.js

@@ -6,8 +6,10 @@ function Comments({ user, loading }) {
             {user.comments.map((item, idx) => (
                 <Comment
                     key={idx}
+                    idx={idx}
                     data={item}
                     loading={loading}
+                    length={user.comments.length}
                 />
             ))}
         </ul>

components/dashboard/userAccount/tabs/messages/Message.js

@@ -4,7 +4,7 @@ import CalndarD from '@/components/icons/CalndarD'
 import MessageNotifd from '@/components/icons/MessageNotifD'
 import React from 'react'
 
-function Message({ data, loading }) {
+function Message({ data, loading, length, idx }) {
     return (
         <li>
             <div className="flex items-center justify-start gap-[8px]">
@@ -28,7 +28,9 @@ function Message({ data, loading }) {
                     </TextLoading>
                 </div>
             </div>
-            <span className='block bg-[#EFEFEF] h-px w-full mt-[12px]'></span>
+            {length > idx + 1 && (
+                <span className='block bg-[#EFEFEF] h-px w-full mt-[12px]'></span>
+            )}
         </li>
     )
 }

components/dashboard/userAccount/tabs/messages/index.js

@@ -6,8 +6,10 @@ function Messages({ user, loading }) {
             {user.messages.map((item, idx) => (
                 <Message
                     key={idx}
+                    idx={idx}
                     data={item}
                     loading={loading}
+                    length={user.messages.length}
                 />
             ))}
         </ul>