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

app/component/element/AutoSelector.js

@@ -17,7 +17,7 @@ function AutoSelector({
       disablePortal
       options={list}
       disabled={disabled}
-      defaultValue={value || ""}
+      value={value || ""}
       ListboxProps={listboxProps}
       getOptionLabel={(option) => {
         if (typeof option === "string") return option;

app/globals.css

@@ -867,3 +867,13 @@ html {
 .MuiButton-loading .MuiButton-loadingIndicator {
   color: #ffffff !important;
 }
+
+@keyframes spin {
+  to {
+    transform: rotate(90deg);
+  }
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}

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
+      disabled={loading}
-      !py-[6px] md:!py-2 lg:!py-[9px] !px-[16px] sm:!px-[23px] md:!px-[29px] lg:!px-[36px] !mr-0 md:!mr-4"
+      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
+      `}
+    >
+      {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 = {
+                // const changedKey = {
-                  name: data.name,
+                //   name: data.name,
-                  relation: data.relation,
+                //   relation: data.relation,
-                  contact: {
+                //   contact: {
-                    phone: data.phone,
+                //     phone: data.phone,
-                    address: data.address,
+                //     address: data.address,
-                  },
+                //   },
-                };
+                // };
-                changeData("update", name, id, changedKey);
+                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"

components/dashboard/userAccount/detailUser/allergies/ItemAllergie.js

@@ -3,7 +3,7 @@ import TextLoading from "@/app/component/loading/Text";
 import { TableCell, TableRow } from "@mui/material";
 import ModalEditItem from "@/components/dashboard/userAccount/components/modal/ModalEditItem";
 import Content from "./modal/Content";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 function ItemAllergie({ row, idx, changeData }) {
   const contentData = {
@@ -11,9 +11,18 @@ function ItemAllergie({ row, idx, changeData }) {
     reaction: row.reaction,
     severity: row.severity,
   };
+
   const [data, setData] = useState(contentData);
   const resetData = () => setData(contentData);
 
+  useEffect(() => {
+    setData({
+      substance: row.substance,
+      reaction: row.reaction,
+      severity: row.severity,
+    });
+  }, [row]);
+
   return (
     <TableRow className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent">
       <TableCell

components/dashboard/userAccount/detailUser/allergies/index.js

@@ -4,7 +4,9 @@ import { useState } from "react";
 import ItemAllergie from "./ItemAllergie";
 import ModalAddAlergie from "./modal";
 
-function Allergies({ data, changeData }) {
+function Allergies({ data, changeData, updateData, loading }) {
+  const { other } = data;
+  const { allergies } = other && other[0];
   const tableHead = ["ردیف", "ماده آلرژی‌زا", "واکنش", "شدت", ""];
   const centerTable = [0];
   const [open, setOpen] = useState(false);
@@ -15,16 +17,18 @@ function Allergies({ data, changeData }) {
         <ModalAddAlergie
           open={open}
           setOpen={setOpen}
+          loading={loading}
+          updateData={updateData}
           changeData={changeData}
         />
       </Head>
-      {data.allergies.length ? (
+      {allergies.length ? (
         <CustomTable
           zeroRadius={true}
           tableHead={tableHead}
           centerTable={centerTable}
         >
-          {data.allergies.map((row, idx) => (
+          {allergies.map((row, idx) => (
             <ItemAllergie
               key={idx}
               row={row}

components/dashboard/userAccount/detailUser/allergies/modal/index.js

@@ -6,7 +6,7 @@ import Content from "./Content";
 import { useState } from "react";
 import CloseModalD from "@/components/icons/CloseModalD";
 
-function ModalAddAlergie({ open, setOpen, changeData }) {
+function ModalAddAlergie({ open, setOpen, loading, changeData, updateData }) {
   const contentItem = {
     substance: "",
     reaction: "",
@@ -30,7 +30,7 @@ function ModalAddAlergie({ open, setOpen, changeData }) {
     <>
       {/* Button Modal */}
       <>
-        <UpdateBtn />
+        <UpdateBtn updateData={updateData} loading={loading} />
         <AddBtn handleOpen={handleOpen} />
       </>
 

components/dashboard/userAccount/detailUser/disease/index.js

@@ -4,7 +4,7 @@ import { Switch, TableCell, TableRow } from "@mui/material";
 import Head from "@/components/dashboard/userAccount/components/Head";
 import UpdateBtn from "@/components/dashboard/userAccount/components/UpdateBtn";
 
-function Disease({ data, setData, updateData }) {
+function Disease({ data, setData, updateData, loading }) {
   const { other } = data;
   const { disease } = other && other[0];
   const tableHead = ["ردیف", "اسم", "وضعیت", ""];
@@ -31,7 +31,7 @@ function Disease({ data, setData, updateData }) {
   return (
     <div className="opacity-page">
       <Head text="لیست بیماری ها" add={false}>
-        <UpdateBtn updateData={updateData} />
+        <UpdateBtn updateData={updateData} loading={loading} />
       </Head>
       <CustomTable
         zeroRadius={true}

components/dashboard/userAccount/detailUser/familyHistory/ItemHistory.js

@@ -3,7 +3,7 @@ import TextLoading from "@/app/component/loading/Text";
 import { TableCell, TableRow } from "@mui/material";
 import ModalEditItem from "@/components/dashboard/userAccount/components/modal/ModalEditItem";
 import Content from "./modal/Content";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 function ItemHistory({ row, idx, changeData }) {
   const contentData = {
@@ -12,6 +12,12 @@ function ItemHistory({ row, idx, changeData }) {
   };
   const [data, setData] = useState(contentData);
   const resetData = () => setData(contentData);
+  useEffect(() => {
+    setData({
+      relation: row.relation,
+      disease: row.disease,
+    });
+  }, [row]);
 
   return (
     <TableRow
@@ -49,10 +55,10 @@ function ItemHistory({ row, idx, changeData }) {
           <ModalEditItem
             id={idx}
             data={data}
-            title="سابقه خانوادگی"
             name="family_history"
             resetData={resetData}
             changeData={changeData}
+            title="سابقه خانوادگی"
           >
             <Content data={data} setData={setData} />
           </ModalEditItem>

components/dashboard/userAccount/detailUser/familyHistory/index.js

@@ -4,7 +4,9 @@ import { useState } from "react";
 import ModalAddHistory from "./modal";
 import ItemHistory from "./ItemHistory";
 
-function FamilyHistory({ data, changeData }) {
+function FamilyHistory({ data, changeData, loading, updateData }) {
+  const { other } = data;
+  const { family_history } = other && other[0];
   const tableHead = ["ردیف", "بیماری", "نسبت خانوادگی", ""];
   const centerTable = [0];
   const [open, setOpen] = useState(false);
@@ -15,16 +17,18 @@ function FamilyHistory({ data, changeData }) {
         <ModalAddHistory
           open={open}
           setOpen={setOpen}
+          loading={loading}
           changeData={changeData}
+          updateData={updateData}
         />
       </Head>
-      {data.medications.length ? (
+      {family_history.length ? (
         <CustomTable
           zeroRadius={true}
           tableHead={tableHead}
           centerTable={centerTable}
         >
-          {data.family_history.map((row, idx) => (
+          {family_history.map((row, idx) => (
             <ItemHistory
               key={idx}
               row={row}

components/dashboard/userAccount/detailUser/familyHistory/modal/index.js

@@ -6,7 +6,7 @@ import Content from "./Content";
 import { useState } from "react";
 import CloseModalD from "@/components/icons/CloseModalD";
 
-function ModalAddHistory({ open, setOpen, changeData }) {
+function ModalAddHistory({ open, setOpen, changeData, loading, updateData }) {
   const contentItem = {
     relation: "",
     disease: "",
@@ -24,7 +24,7 @@ function ModalAddHistory({ open, setOpen, changeData }) {
     <>
       {/* Button Modal */}
       <>
-        <UpdateBtn />
+        <UpdateBtn loading={loading} updateData={updateData} />
         <AddBtn handleOpen={handleOpen} />
       </>
 

components/dashboard/userAccount/detailUser/function.js

@@ -1,20 +1,20 @@
-export const changeData = (action, name, id, payload) => {
+export const setNewData = (action, name, id, payload, data, setData) => {
   const newData = {
     ...data,
-    [name]: [...data[name]],
+    // [name]: [...data[name]],
   };
 
   switch (action) {
     case "update":
-      newData[name][id] = payload;
+      newData.other[0][name][id] = payload;
       break;
 
     case "add":
-      newData[name].push(payload);
+      newData.other[0][name].push(payload);
       break;
 
     case "delete":
-      newData[name].splice(id, 1);
+      newData.other[0][name].splice(id, 1);
       break;
 
     default:

components/dashboard/userAccount/detailUser/index.js

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import HeadTab from "../content/HeadTab";
-import profileData from "@/data/profile_other.json";
+import { request } from "@/services/response";
+import { setNewData } from "./function";
 
 // Tabs
 import Medications from "./medications";
@@ -10,8 +11,6 @@ import Allergies from "./allergies";
 import Surgeries from "./surgeries";
 import FamilyHistory from "./familyHistory";
 import Relatives from "./relatives";
-import { request } from "@/services/response";
-import { changeData } from "./function";
 
 function DetailUser({
   user,
@@ -20,50 +19,28 @@ function DetailUser({
   isTurnsDetails,
   setIsTurnsDetails,
 }) {
-  const [tab, setTab] = useState(0);
+  const [tab, setTab] = useState(5);
-  const {
+  const initialData = {
-    name,
+    name: dataUser?.name,
-    description,
+    description: dataUser?.description,
-    birthday,
+    birthday: dataUser?.birthday,
-    insurance_id,
+    basic_insurance: [dataUser?.basic_insurance?.id],
-    basic_insurance,
+    blood_type: dataUser?.blood_type,
-    blood_type,
+    education: dataUser?.education,
-    education,
+    fathers_name: dataUser?.fathers_name,
-    fathers_name,
+    gender: dataUser?.gender,
-    gender,
+    home_phone: dataUser?.home_phone,
-    home_phone,
+    job: dataUser?.job,
-    job,
+    marital_status: dataUser?.marital_status,
-    marital_status,
+    supplementary_insurance: dataUser?.supplementary_insurance,
-    national_code,
+    work_phone: dataUser?.work_phone,
-    national_code_approved,
+    address: dataUser?.address,
-    supplementary_insurance,
+    other: dataUser?.other,
-    work_phone,
+    national_code: dataUser?.national_code,
-    address,
+  };
-    other,
+
-  } = dataUser;
+  const [data, setData] = useState(initialData);
-  const [data, setData] = useState({
+  const [loading, setLoading] = useState(false);
-    name: name,
-    description: description,
-    birthday: birthday,
-    insurance_id: insurance_id,
-    basic_insurance: basic_insurance,
-    blood_type: blood_type,
-    education: education,
-    fathers_name: fathers_name,
-    gender: gender,
-    home_phone: home_phone,
-    job: job,
-    marital_status: marital_status,
-    national_code: national_code,
-    national_code_approved: national_code_approved,
-    supplementary_insurance: supplementary_insurance,
-    work_phone: work_phone,
-    address: address,
-    other: other,
-  });
-  console.log(data);
-  console.log(dataUser);
-  console.log(userInfo);
 
   const listTab = [
     "اطلاعات عمومی",
@@ -77,11 +54,18 @@ function DetailUser({
 
   const handleChange = (_, newValue) => setTab(newValue);
   const updateData = () => {
+    setLoading(true);
     request
-      .patchUserProfile(data, data.uuid)
+      .patchUserProfile(data, dataUser.uuid)
-      .then((res) => {})
+      .then((res) => {
-      .catch((err) => {});
+        setLoading(false);
+      })
+      .catch((err) => {
+        setLoading(false);
+      });
   };
+  const changeData = (action, name, id, payload) =>
+    setNewData(action, name, id, payload, data, setData);
 
   const components = [
     <Information
@@ -93,12 +77,42 @@ function DetailUser({
       isTurnsDetails={isTurnsDetails}
       setIsTurnsDetails={setIsTurnsDetails}
     />,
-    <Disease data={data} setData={setData} updateData={updateData} />,
+    <Disease
-    <Allergies data={data} changeData={changeData} />,
+      data={data}
-    <Medications data={data} changeData={changeData} />,
+      setData={setData}
-    <Surgeries data={data} changeData={changeData} />,
+      loading={loading}
-    <FamilyHistory data={data} changeData={changeData} />,
+      updateData={updateData}
-    <Relatives data={data} changeData={changeData} />,
+    />,
+    <Allergies
+      data={data}
+      loading={loading}
+      changeData={changeData}
+      updateData={updateData}
+    />,
+    <Medications
+      data={data}
+      loading={loading}
+      changeData={changeData}
+      updateData={updateData}
+    />,
+    <Surgeries
+      data={data}
+      loading={loading}
+      changeData={changeData}
+      updateData={updateData}
+    />,
+    <FamilyHistory
+      data={data}
+      loading={loading}
+      changeData={changeData}
+      updateData={updateData}
+    />,
+    <Relatives
+      data={data}
+      loading={loading}
+      changeData={changeData}
+      updateData={updateData}
+    />,
   ];
 
   return (

components/dashboard/userAccount/detailUser/information/DateBirthday.js

@@ -57,7 +57,7 @@ function DateBirthday({ data, changeData }) {
         <DatePicker
           locale="fa"
           onChange={(e) => {
-            changeData(convertToJalali(e._d), "value", "date_of_birth");
+            changeData(convertToJalali(e._d), "value", "birthday");
             handleClose();
           }}
         />

components/dashboard/userAccount/detailUser/information/Form.js

@@ -11,8 +11,11 @@ import {
 import AutoSelector from "@/app/component/element/AutoSelector";
 
 function Form({ data, userInfo, insurance, changeData, prevData }) {
-  const findVal = (list, name) =>
+  const findVal = (list, name, arr) =>
-    data && list && list.length && list.find((g) => g.id === data[name]);
+    data &&
+    list &&
+    list.length &&
+    list.find((g) => g.id === (arr ? data[name][0] : data[name]));
 
   return (
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-[24px]">
@@ -78,7 +81,7 @@ function Form({ data, userInfo, insurance, changeData, prevData }) {
           updateData={(name, val) => {
             changeData([Number(val.id)], "value", name);
           }}
-          value={findVal(insurance, "basic_insurance")}
+          value={findVal(insurance, "basic_insurance", true)?.name}
           label="نوع بیمه"
           name="basic_insurance"
           list={insurance}

components/dashboard/userAccount/detailUser/information/index.js

@@ -33,7 +33,7 @@ function Information({ user, data, setData, userInfo, dataUser }) {
     setLoading(true);
     request[dataUser ? "patchUserProfile" : "postUserProfile"](
       data,
-      Cookies.get("uuid")
+      dataUser ? dataUser.uuid : Cookies.get("uuid")
     )
       .then((res) => {
         setLoading(false);

components/dashboard/userAccount/detailUser/medications/ItemMedication.js

@@ -3,7 +3,7 @@ import TextLoading from "@/app/component/loading/Text";
 import { TableCell, TableRow } from "@mui/material";
 import ModalEditItem from "@/components/dashboard/userAccount/components/modal/ModalEditItem";
 import Content from "./modal/Content";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 function ItemMedication({ row, idx, changeData }) {
   const contentData = {
@@ -14,6 +14,14 @@ function ItemMedication({ row, idx, changeData }) {
   const [data, setData] = useState(contentData);
   const resetData = () => setData(contentData);
 
+  useEffect(() => {
+    setData({
+      name: row.name,
+      dose: row.dose,
+      frequency: row.frequency,
+    });
+  }, [row]);
+
   return (
     <TableRow
       key={idx}

components/dashboard/userAccount/detailUser/medications/index.js

@@ -4,7 +4,9 @@ import { useState } from "react";
 import ItemMedication from "./ItemMedication";
 import ModalAddMedications from "./modal";
 
-function Medications({ data, changeData }) {
+function Medications({ data, changeData, updateData, loading }) {
+  const { other } = data;
+  const { medications } = other && other[0];
   const tableHead = ["ردیف", "نام دارو", "دوز مصرفی", "تعداد و زمان مصرف", ""];
   const centerTable = [0];
   const [open, setOpen] = useState(false);
@@ -15,16 +17,18 @@ function Medications({ data, changeData }) {
         <ModalAddMedications
           open={open}
           setOpen={setOpen}
+          loading={loading}
+          updateData={updateData}
           changeData={changeData}
         />
       </Head>
-      {data.medications.length ? (
+      {medications.length ? (
         <CustomTable
           zeroRadius={true}
           tableHead={tableHead}
           centerTable={centerTable}
         >
-          {data.medications.map((row, idx) => (
+          {medications.map((row, idx) => (
             <ItemMedication
               key={idx}
               row={row}

components/dashboard/userAccount/detailUser/medications/modal/index.js

@@ -6,7 +6,13 @@ import { useState } from "react";
 import Content from "./Content";
 import CloseModalD from "@/components/icons/CloseModalD";
 
-function ModalAddMedications({ open, setOpen, changeData }) {
+function ModalAddMedications({
+  open,
+  setOpen,
+  loading,
+  changeData,
+  updateData,
+}) {
   const contentItem = {
     name: "",
     dose: "",
@@ -26,7 +32,7 @@ function ModalAddMedications({ open, setOpen, changeData }) {
     <>
       {/* Button Modal */}
       <>
-        <UpdateBtn />
+        <UpdateBtn updateData={updateData} loading={loading} />
         <AddBtn handleOpen={handleOpen} />
       </>
 

components/dashboard/userAccount/detailUser/relatives/ItemRelatives.js

@@ -3,7 +3,7 @@ import TextLoading from "@/app/component/loading/Text";
 import { TableCell, TableRow } from "@mui/material";
 import ModalEditItem from "@/components/dashboard/userAccount/components/modal/ModalEditItem";
 import Content from "./modal/Content";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 function ItemRelatives({ row, idx, changeData }) {
   const contentData = {
@@ -12,9 +12,19 @@ function ItemRelatives({ row, idx, changeData }) {
     phone: row.contact.phone,
     address: row.contact.address,
   };
+
   const [data, setData] = useState(contentData);
   const resetData = () => setData(contentData);
 
+  useEffect(() => {
+    setData({
+      name: row.name,
+      relation: row.relation,
+      phone: row.contact.phone,
+      address: row.contact.address,
+    });
+  }, [row]);
+
   return (
     <TableRow
       key={idx}

components/dashboard/userAccount/detailUser/relatives/index.js

@@ -4,7 +4,9 @@ import Head from "@/components/dashboard/userAccount/components/Head";
 import ModalAddRelatives from "./modal";
 import ItemRelatives from "./ItemRelatives";
 
-function Relatives({ data, changeData }) {
+function Relatives({ data, changeData, loading, updateData }) {
+  const { other } = data;
+  const { relatives } = other && other[0];
   const tableHead = ["ردیف", "نام", "نسبت", "شماره تماس", "آدرس", ""];
   const centerTable = [0];
   const [open, setOpen] = useState(false);
@@ -14,17 +16,19 @@ function Relatives({ data, changeData }) {
       <Head text="لیست بستگان">
         <ModalAddRelatives
           open={open}
+          loading={loading}
           setOpen={setOpen}
           changeData={changeData}
+          updateData={updateData}
         />
       </Head>
-      {data.medications.length ? (
+      {relatives.length ? (
         <CustomTable
           zeroRadius={true}
           tableHead={tableHead}
           centerTable={centerTable}
         >
-          {data.relatives.map((row, idx) => (
+          {relatives.map((row, idx) => (
             <ItemRelatives
               key={idx}
               row={row}

components/dashboard/userAccount/detailUser/relatives/modal/index.js

@@ -6,7 +6,7 @@ import Content from "./Content";
 import { useState } from "react";
 import CloseModalD from "@/components/icons/CloseModalD";
 
-function ModalAddRelatives({ open, setOpen, changeData }) {
+function ModalAddRelatives({ open, setOpen, changeData, loading, updateData }) {
   const contentItem = {
     name: "",
     relation: "",
@@ -36,7 +36,7 @@ function ModalAddRelatives({ open, setOpen, changeData }) {
     <>
       {/* Button Modal */}
       <>
-        <UpdateBtn />
+        <UpdateBtn updateData={updateData} loading={loading} />
         <AddBtn handleOpen={handleOpen} />
       </>
 

components/dashboard/userAccount/detailUser/surgeries/ItemSurgeries.js

@@ -3,7 +3,7 @@ import TextLoading from "@/app/component/loading/Text";
 import { TableCell, TableRow } from "@mui/material";
 import ModalEditItem from "@/components/dashboard/userAccount/components/modal/ModalEditItem";
 import Content from "./modal/Content";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 function ItemSurgeries({ row, idx, changeData }) {
   const contentData = {
@@ -14,6 +14,14 @@ function ItemSurgeries({ row, idx, changeData }) {
   const [data, setData] = useState(contentData);
   const resetData = () => setData(contentData);
 
+  useEffect(() => {
+    setData({
+      type: row.type,
+      year: row.year,
+      hospital: row.hospital,
+    });
+  }, [row]);
+
   return (
     <TableRow
       key={idx}

components/dashboard/userAccount/detailUser/surgeries/index.js

@@ -4,7 +4,9 @@ import { useState } from "react";
 import ItemSurgeries from "./ItemSurgeries";
 import ModalAddSurgeries from "./modal";
 
-function Surgeries({ data, changeData }) {
+function Surgeries({ data, changeData, loading, updateData }) {
+  const { other } = data;
+  const { surgeries } = other && other[0];
   const tableHead = [
     "ردیف",
     "نوع جراحی",
@@ -21,16 +23,18 @@ function Surgeries({ data, changeData }) {
         <ModalAddSurgeries
           open={open}
           setOpen={setOpen}
+          loading={loading}
+          updateData={updateData}
           changeData={changeData}
         />
       </Head>
-      {data.surgeries.length ? (
+      {surgeries.length ? (
         <CustomTable
           zeroRadius={true}
           tableHead={tableHead}
           centerTable={centerTable}
         >
-          {data.surgeries.map((row, idx) => (
+          {surgeries.map((row, idx) => (
             <ItemSurgeries
               key={idx}
               row={row}

components/dashboard/userAccount/detailUser/surgeries/modal/index.js

@@ -6,7 +6,7 @@ import Content from "./Content";
 import { useState } from "react";
 import CloseModalD from "@/components/icons/CloseModalD";
 
-function ModalAddSurgeries({ open, setOpen, changeData }) {
+function ModalAddSurgeries({ open, setOpen, updateData, loading, changeData }) {
   const contentItem = {
     type: "",
     year: "",
@@ -26,7 +26,7 @@ function ModalAddSurgeries({ open, setOpen, changeData }) {
     <>
       {/* Button Modal */}
       <>
-        <UpdateBtn />
+        <UpdateBtn loading={loading} updateData={updateData} />
         <AddBtn handleOpen={handleOpen} />
       </>
 

tailwind.config.js

@@ -12,6 +12,15 @@ module.exports = {
         "gradient-conic":
           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
+      keyframes: {
+        spinCounter: {
+          from: { transform: "rotate(0deg)" },
+          to: { transform: "rotate(-360deg)" },
+        },
+      },
+      animation: {
+        spinCounter: "spinCounter 1s linear infinite",
+      },
     },
   },
   plugins: [],