handle change data and update data in dashboard page for all tabs

components/dashboard/userAccount/components/UpdateBtn.js

@@ -1,16 +1,30 @@
 import UpdateList from "@/components/icons/UpdateList";
-import { Button } from "@mui/material";
+import { Button, CircularProgress } from "@mui/material";
 
-function UpdateBtn({ updateData }) {
+function UpdateBtn({ updateData, loading }) {
   return (
     <Button
       variant="outlined"
       onClick={updateData}
-      className="!border-[#5559CE] !border-[2px] !flex !items-center !justify-center !gap-2 !text-[14px] !font-medium
-      !py-[6px] md:!py-2 lg:!py-[9px] !px-[16px] sm:!px-[23px] md:!px-[29px] lg:!px-[36px] !mr-0 md:!mr-4"
+      disabled={loading}
+      className={`
+          !border-[#5559CE] !border-[2px] !relative
+        !py-[6px] md:!py-2 lg:!py-[9px] !px-[8px] sm:!px-[15px] md:!px-[21px] lg:!px-[28px] !mr-0 md:!mr-4
+      `}
     >
-      <UpdateList />
-      آپدیت کردن
+      {loading && (
+        <CircularProgress
+          className="!absolute !right-[45%] !top-[25%]"
+          size={20}
+        />
+      )}
+      <div
+        className={`!flex !items-center !justify-center !gap-2 !text-[14px] !font-medium
+        ${loading ? "opacity-0" : "opacity-100"}`}
+      >
+        <UpdateList />
+        آپدیت کردن
+      </div>
     </Button>
   );
 }

components/dashboard/userAccount/components/modal/ModalEditItem.js

@@ -51,15 +51,15 @@ function ModalEditItem({
             <Button
               variant="contained"
               onClick={() => {
-                const changedKey = {
-                  name: data.name,
-                  relation: data.relation,
-                  contact: {
-                    phone: data.phone,
-                    address: data.address,
-                  },
-                };
-                changeData("update", name, id, changedKey);
+                // const changedKey = {
+                //   name: data.name,
+                //   relation: data.relation,
+                //   contact: {
+                //     phone: data.phone,
+                //     address: data.address,
+                //   },
+                // };
+                changeData("update", name, id, data);
                 handleClose();
               }}
               className="!py-[4px] md:!py-[6px] !min-h-[32px] md:!min-h-[39px] lg:!min-h-[46px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[#EFEFEF] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"