dark mode page add-doctor & user account

components/panel/userAccount/bank/List.js

@@ -19,7 +19,7 @@ function List({ data, loading }) {
               className="!border-0 !border-b !border-[#DBDBDB]"
             >
               <TableCell
-                className="!pr-[18px] !bg-[#F8F8F8] !text-[16px] !font-medium !text-[#616161] !text-nowrap"
+                className="!pr-[18px] !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-[#616161] !text-nowrap"
                 align="center"
               >
                 <TextLoading width={15} height={18} loading={loading}>
@@ -27,23 +27,23 @@ function List({ data, loading }) {
                 </TextLoading>
               </TableCell>
               <TableCell
-                className="!text-start !bg-[#F8F8F8] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
+                className="!text-start !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
                 align="right"
               >
-                <TextLoading width={30} height={18} loading={loading}>
+                <TextLoading width={50} height={18} loading={loading}>
                   {row.card_number}
                 </TextLoading>
               </TableCell>
               <TableCell
-                className="!text-start !bg-[#F8F8F8] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
+                className="!text-start !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
                 align="right"
               >
-                <TextLoading width={30} height={18} loading={loading}>
+                <TextLoading width={80} height={18} loading={loading}>
                   {row.shaba_number}
                 </TextLoading>
               </TableCell>
               <TableCell
-                className="!text-start !bg-[#F8F8F8] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
+                className="!text-start !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
                 align="right"
               >
                 <TextLoading width={30} height={18} loading={loading}>
@@ -51,12 +51,12 @@ function List({ data, loading }) {
                 </TextLoading>
               </TableCell>
               <TableCell
-                className="!text-start !bg-[#F8F8F8] !pr-[18px] !text-nowrap"
+                className="!text-start !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !pr-[18px] !text-nowrap"
                 align="right"
               >
                 <TextLoading width={50} height={18} loading={loading}>
                   <div className="flex items-center justify-start gap-[16px]">
-                    <p className="text-[16px] min-w-[60px] font-medium text-[#616161]">
+                    <p className="text-[16px] min-w-[60px] dark:text-[#A1A1A1] font-medium text-[#616161]">
                       {row.status ? "فعال" : "غیر فعال"}
                     </p>
                     <SwitchTable value={row.status} />
@@ -64,7 +64,7 @@ function List({ data, loading }) {
                 </TextLoading>
               </TableCell>
               <TableCell
-                className="!text-center !bg-[#F8F8F8] !pr-[18px] !text-nowrap"
+                className="!text-center !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !pr-[18px] !text-nowrap"
                 align="right"
               >
                 <div className="flex items-center justify-center gap-[4px]">

components/panel/userAccount/bank/head/index.js

@@ -3,7 +3,9 @@ import ModalAddCard from "./modal";
 function Head() {
   return (
     <div className="w-full flex items-center justify-between">
-      <p className="text-[#525252] text-[20px] font-bold">کارت های بانکی شما</p>
+      <p className="text-[#525252] dark:text-[#A1A1A1] text-[20px] font-bold">
+        کارت های بانکی شما
+      </p>
       <ModalAddCard />
     </div>
   );

components/panel/userAccount/bank/head/modal/index.js

@@ -33,10 +33,10 @@ function ModalAddCard() {
       <Modal open={open} onClose={handleClose}>
         <Box
           sx={styleDefault}
-          className="!w-full !h-full md:!h-fit sm:!w-fit !rounded-none sm:!rounded-[8px] sm:!min-w-[524px] !py-[20px] !pt-[24px] md:!pt-[22px] lg:!pt-[20px] !pb-[36px]"
+          className="!w-full dark:!bg-[#222433] dark:!shadow-none !h-full md:!h-fit sm:!w-fit !rounded-none sm:!rounded-[8px] sm:!min-w-[524px] !py-[20px] !pt-[24px] md:!pt-[22px] lg:!pt-[20px] !pb-[36px]"
         >
           <div className="flex items-center justify-between w-full">
-            <p className="text-[#3B3B3B] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
+            <p className="text-[#3B3B3B] dark:text-[#D7D8ED] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
               اضافه کردن شماره کارت
             </p>
             <Button onClick={handleClose} className="!p-1" variant="text">
@@ -48,7 +48,8 @@ function ModalAddCard() {
             <Button
               variant="outlined"
               onClick={handleClose}
-              className="!min-w-[134px] !rounded-[4px] !h-[40px] md:!h-[44px] lg:!h-[48px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium"
+              className="!min-w-[134px] !rounded-[4px] !h-[40px] md:!h-[44px] lg:!h-[48px] !border-[#828DE0] dark:!bg-[#C7CEF4] 
+              dark:!border-transparent dark:!text-[#5559CE] !text-[#828DE0] !text-[16px] !font-medium"
             >
               انصراف
             </Button>

components/panel/userAccount/bank/index.js

@@ -2,12 +2,12 @@ import Cards from "./cards";
 import Head from "./head";
 import List from "./List";
 
-function Bank({ data }) {
+function Bank({ data, loading }) {
   return (
     <div className="opacity-page">
       <Head />
-      <List data={data} loading={false} />
-      <Cards data={data} loading={false} />
+      <List data={data} loading={loading} />
+      <Cards data={data} loading={loading} />
     </div>
   );
 }

components/panel/userAccount/index.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Account from "./account";
 import Bank from "./bank";
 import Tab from "./Tab";
@@ -8,11 +8,18 @@ import Tab from "./Tab";
 const listTab = ["حساب کاربری", "حساب بانکی"];
 
 function UserAccountPage({ data }) {
-  const [value, setValue] = useState(1);
+  const [value, setValue] = useState(0);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  }, []);
 
   const handleChange = (event, newValue) => setValue(newValue);
 
-  const components = [<Account />, <Bank data={data.bank} />];
+  const components = [<Account />, <Bank loading={loading} data={data.bank} />];
 
   return (
     <div