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

components/panel/dashboard/Cards.js

@@ -1,8 +1,9 @@
-import CalendarTickGreenP from "../../icons/CalendarTickGreenP"
-import CardOrangeP from "../../icons/CardOrangeP"
-import PeopleBlueP from "../../icons/PeopleBlueP"
+import CalendarTickGreenP from "../../icons/CalendarTickGreenP";
+import TextLoading from "@/app/component/loading/Text";
+import CardOrangeP from "../../icons/CardOrangeP";
+import PeopleBlueP from "../../icons/PeopleBlueP";
 
-function Cards({ data }) {
+function Cards({ data, loading }) {
 
   const list = [
     { text: 'تعداد کل بیماران', bg_color: 'bg-[#E5E9FF]', value: data.number_of_patients, label: 'نفر', icon: <PeopleBlueP /> },
@@ -22,10 +23,12 @@ function Cards({ data }) {
           </div>
           <div className="flex items-center justify-between">
             <p className="text-[#525252] text-[14px] font-normal">{item.text}</p>
-            <p className="text-[#3B3B3B] text-[24px] font-medium">
-              {item.value}
-              <span className="text-[#616161] mr-[6px] text-[12px] font-normal">{item.label}</span>
-            </p>
+            <TextLoading width={70} height={20} loading={loading}>
+              <p className="text-[#3B3B3B] text-[24px] font-medium">
+                {item.value}
+                <span className="text-[#616161] mr-[6px] text-[12px] font-normal">{item.label}</span>
+              </p>
+            </TextLoading>
           </div>
         </li>
       ))}