design and handle modal add, edit and delete in all tabs dashboard & change list & update data profile_other

app/component/Field.js

@@ -1,16 +1,29 @@
 import { TextField } from "@mui/material";
 
-function Field({ title, type, props, multiline, isPlaceHolder }) {
+function Field({
+  type,
+  name,
+  title,
+  props,
+  value,
+  multiline,
+  handleChange,
+  isPlaceHolder,
+}) {
   return (
     <TextField
       {...props}
       size="small"
-      placeholder={isPlaceHolder && title}
+      defaultValue={value}
-      label={!isPlaceHolder ? title : ""}
       type={type || "text"}
       multiline={!!multiline}
       rows={!!multiline ? 4 : 1}
+      label={!isPlaceHolder ? title : ""}
+      placeholder={isPlaceHolder && title}
       className="!w-full !mx-auto !bg-[#FFF]"
+      onChange={(e) => {
+        handleChange(name || "", e.target.value);
+      }}
       sx={{
         "& .MuiFormLabel-root": {
           top: "-4px !important",

app/component/element/AutoSelector.js

@@ -0,0 +1,96 @@
+import BottomSelect from "@/components/icons/BottomSelect";
+import { Autocomplete, Button, TextField } from "@mui/material";
+import { styleTextSelectRight } from "@/mui";
+
+function AutoSelector({
+  list,
+  value,
+  isError,
+  updateData,
+  label,
+  disabled = false,
+  listboxProps,
+  name,
+}) {
+  return (
+    <Autocomplete
+      disablePortal
+      options={list}
+      disabled={disabled}
+      defaultValue={value}
+      ListboxProps={listboxProps}
+      getOptionLabel={(option) => {
+        if (typeof option === "string") return option;
+        return option?.name || option?.label || "";
+      }}
+      className="!w-full !rounded-lg auto-complete-selector"
+      onChange={(e, newValue) => updateData(name, newValue?.label || "")}
+      sx={{
+        ...styleTextSelectRight,
+        // Hide Icon Number
+        "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
+          {
+            display: "none",
+          },
+        "& input[type=number]": {
+          MozAppearance: "textfield",
+        },
+        "& .MuiInputBase-input": { padding: "12.5px 14px !important" },
+        "& .MuiInputBase-root": {
+          borderRadius: 2,
+          padding: "0 !important",
+          height: {
+            xs: "43px !important",
+            sm: "43px !important",
+            md: "46px !important",
+            lg: "48px !important",
+          },
+        },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: "1px solid #D7D7D7",
+        },
+        "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
+          {
+            borderColor: "#D7D7D7 !important",
+          },
+        "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
+          {
+            border: "1px solid #5559CE !important",
+          },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: isError ? "1px solid red !important" : "",
+        },
+      }}
+      renderOption={(props, option) => (
+        <Button
+          fullWidth
+          {...props}
+          key={option.id || props.id}
+          className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
+        >
+          {option.name || option.label}
+        </Button>
+      )}
+      renderInput={(params) => (
+        <TextField
+          fullWidth
+          {...params}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <div className="absolute left-4">
+                <BottomSelect />
+              </div>
+            ),
+          }}
+          placeholder={label}
+          sx={{
+            borderRadius: "8px",
+          }}
+        />
+      )}
+    />
+  );
+}
+
+export default AutoSelector;

components/dashboard/userAccount/components/modal/ModalDeleteItem.js

@@ -0,0 +1,60 @@
+import CloseModalD from "@/components/icons/CloseModalD";
+import TrashB from "@/components/icons/TrashB";
+import { styleDefault } from "@/mui";
+import { Box, Button, Modal } from "@mui/material";
+import { useState } from "react";
+
+function ModalDeleteItem({ changeData, name, id }) {
+  const [open, setOpen] = useState(false);
+
+  const handleClose = () => setOpen(false);
+  const handleOpen = () => setOpen(true);
+
+  return (
+    <>
+      <Button className="!min-w-fit !p-1" variant="text" onClick={handleOpen}>
+        <TrashB />
+      </Button>
+      <Modal open={open} onClose={handleClose}>
+        <Box
+          sx={styleDefault}
+          className="!w-fit dark:!bg-[#222433] sm-modal dark:!shadow-[0px_4px_25px_10px_#1F1D2B] !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
+        >
+          <div className="flex items-center justify-between w-full">
+            <p className="text-[#3B3B3B] text-[14px] dark:text-[#D7D8ED] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
+              حذف
+            </p>
+            <Button onClick={handleClose} className="!p-1" variant="text">
+              <CloseModalD />
+            </Button>
+          </div>
+          <span className="block h-px w-full dark:bg-[#343645] bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]"></span>
+          <p className="text-[#525252] text-[12px] dark:text-[#A1A1A1] md:text-[14px] lg:text-[16px] font-normal">
+            آیا از حذف این آیتم مطمئن هستید؟
+          </p>
+          <div className="flex items-center justify-end gap-[16px] mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]">
+            <Button
+              variant="outlined"
+              onClick={handleClose}
+              className="!py-[4px] dark:!bg-[#C7CEF4] dark:!text-[#5559CE] md:!py-[6px] !min-h-[32px] md:!min-h-[39px] lg:!min-h-[46px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
+            >
+              انصراف
+            </Button>
+            <Button
+              variant="contained"
+              onClick={() => {
+                changeData("delete", name, id);
+                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"
+            >
+              حذف
+            </Button>
+          </div>
+        </Box>
+      </Modal>
+    </>
+  );
+}
+
+export default ModalDeleteItem;

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

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import EditB from "@/components/icons/EditB";
+import { styleDefault } from "@/mui";
+import { Box, Button, Modal } from "@mui/material";
+import CloseModalD from "@/components/icons/CloseModalD";
+
+function ModalEditItem({
+  data,
+  resetData,
+  name,
+  title,
+  id,
+  changeData,
+  children,
+}) {
+  const [open, setOpen] = useState(false);
+
+  const handleClose = () => setOpen(false);
+  const handleOpen = () => setOpen(true);
+
+  return (
+    <>
+      <Button onClick={handleOpen} className="!min-w-fit !p-1" variant="text">
+        <EditB />
+      </Button>
+      <Modal open={open} onClose={handleClose}>
+        <Box
+          sx={styleDefault}
+          className="!w-fit dark:!bg-[#222433] sm-modal dark:!shadow-[0px_4px_25px_10px_#1F1D2B] !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
+        >
+          <div className="flex items-center justify-between w-full">
+            <p className="text-[#3B3B3B] text-[14px] dark:text-[#D7D8ED] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
+              تغییر {title}
+            </p>
+            <Button onClick={handleClose} className="!p-1" variant="text">
+              <CloseModalD />
+            </Button>
+          </div>
+          {children}
+          <div className="flex items-center justify-end gap-[16px] mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]">
+            <Button
+              variant="outlined"
+              onClick={() => {
+                resetData();
+                handleClose();
+              }}
+              className="!py-[4px] dark:!bg-[#C7CEF4] dark:!text-[#5559CE] md:!py-[6px] !min-h-[32px] md:!min-h-[39px] lg:!min-h-[46px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
+            >
+              لغو
+            </Button>
+            <Button
+              variant="contained"
+              onClick={() => {
+                const changedKey = {
+                  name: data.name,
+                  relation: data.relation,
+                  contact: {
+                    phone: data.phone,
+                    address: data.address,
+                  },
+                };
+                changeData("update", name, id, changedKey);
+                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"
+            >
+              ذخیره
+            </Button>
+          </div>
+        </Box>
+      </Modal>
+    </>
+  );
+}
+
+export default ModalEditItem;

components/dashboard/userAccount/content/HeadTab.js

@@ -5,7 +5,6 @@ function HeadTab({
   tab,
   user,
   listTab,
-  loading,
   handleChange,
   isTurnsDetails,
   setIsTurnsDetails,
@@ -15,7 +14,6 @@ function HeadTab({
     <>
       {isTurnsDetails ? (
         <IsTurnsDetails
-          loading={loading}
           user={user}
           setIsTurnsDetails={setIsTurnsDetails}
         />

components/dashboard/userAccount/content/index.js

@@ -32,27 +32,45 @@ function ContentTabs({
   setValue,
   setIsOpenSide,
 }) {
-  const [loading, setLoading] = useState(true);
   const [tab, setTab] = useState(0);
-  const data = profileData[0];
+  const [data, setData] = useState(profileData[0]);
 
-  const handleChange = (_, newValue) => {
+  const handleChange = (_, newValue) => setTab(newValue);
-    setTab(newValue);
+  const changeData = (action, name, id, payload) => {
+    const newData = {
+      ...data,
+      [name]: [...data[name]],
+    };
+
+    switch (action) {
+      case "update":
+        newData[name][id] = payload;
+        break;
+
+      case "add":
+        newData[name].push(payload);
+        break;
+
+      case "delete":
+        newData[name].splice(id, 1);
+        break;
+
+      default:
+        console.warn(`Unknown action: ${action}`);
+        return;
+    }
+    console.log(newData);
+
+    setData(newData);
   };
 
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 2000);
-  }, []);
-
   const components = [
-    <Disease data={data} />,
+    <Disease data={data} changeData={changeData} />,
-    <Allergies data={data} />,
+    <Allergies data={data} changeData={changeData} />,
-    <Medications data={data} />,
+    <Medications data={data} changeData={changeData} />,
-    <Surgeries data={data} />,
+    <Surgeries data={data} changeData={changeData} />,
-    <FamilyHistory data={data} />,
+    <FamilyHistory data={data} changeData={changeData} />,
-    <Relatives data={data} />,
+    <Relatives data={data} changeData={changeData} />,
   ];
 
   return (
@@ -88,7 +106,6 @@ function ContentTabs({
         tab={tab}
         user={user}
         listTab={listTab}
-        loading={loading}
         components={components}
         handleChange={handleChange}
         isTurnsDetails={isTurnsDetails}

components/dashboard/userAccount/sidebars/turns/isTurnsDetails/index.js

@@ -2,16 +2,12 @@ import DetailLg from "./DetailLg";
 import DetailSm from "./DetailSm";
 import Head from "./Head";
 
-function IsTurnsDetails({ user, setIsTurnsDetails, loading }) {
+function IsTurnsDetails({ user, setIsTurnsDetails }) {
   return (
     <div className="md:py-[20px] md:px-[24px] opacity-page">
-      <Head
+      <Head user={user} loading={false} setIsTurnsDetails={setIsTurnsDetails} />
-        user={user}
+      <DetailLg user={user} loading={false} />
-        loading={loading}
+      <DetailSm user={user} loading={false} />
-        setIsTurnsDetails={setIsTurnsDetails}
-      />
-      <DetailLg user={user} loading={loading} />
-      <DetailSm user={user} loading={loading} />
     </div>
   );
 }

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

@@ -0,0 +1,64 @@
+import ModalDeleteItem from "../../components/modal/ModalDeleteItem";
+import TextLoading from "@/app/component/loading/Text";
+import { TableCell, TableRow } from "@mui/material";
+import ModalEditItem from "../../components/modal/ModalEditItem";
+import Content from "./modal/Content";
+import { useState } from "react";
+
+function ItemAllergie({ row, idx, changeData }) {
+  const contentData = {
+    substance: row.substance,
+    reaction: row.reaction,
+    severity: row.severity,
+  };
+  const [data, setData] = useState(contentData);
+  const resetData = () => setData(contentData);
+
+  return (
+    <TableRow className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent">
+      <TableCell
+        className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+        align="center"
+      >
+        <TextLoading width={15} height={18} loading={false}>
+          {idx + 1}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        <TextLoading width={15} height={18} loading={false}>
+          {row.substance}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        <TextLoading width={15} height={18} loading={false}>
+          {row.reaction}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        <TextLoading width={15} height={18} loading={false}>
+          {row.severity}
+        </TextLoading>
+      </TableCell>
+      <TableCell
+        className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+        align="right"
+      >
+        <div className="flex items-center justify-center gap-[4px]">
+          <ModalDeleteItem id={idx} name="allergies" changeData={changeData} />
+          <ModalEditItem
+            id={idx}
+            data={data}
+            title="آلرژی"
+            name="allergies"
+            resetData={resetData}
+            changeData={changeData}
+          >
+            <Content data={data} setData={setData} />
+          </ModalEditItem>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export default ItemAllergie;

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

@@ -1,13 +1,10 @@
 import CustomTable from "@/app/component/CustomTable";
-import TextLoading from "@/app/component/loading/Text";
-import EditB from "@/components/icons/EditB";
-import TrashB from "@/components/icons/TrashB";
-import { Button, TableCell, TableRow } from "@mui/material";
 import Head from "../../components/Head";
 import { useState } from "react";
 import ModalAddAlergie from "./modal";
+import ItemAllergie from "./ItemAllergie";
 
-function Allergies({ data }) {
+function Allergies({ data, changeData }) {
   const tableHead = ["ردیف", "ماده آلرژی‌زا", "واکنش", "شدت", ""];
   const centerTable = [0];
   const [open, setOpen] = useState(false);
@@ -15,57 +12,32 @@ function Allergies({ data }) {
   return (
     <div>
       <Head text="لیست آلرژی ها">
-        <ModalAddAlergie open={open} setOpen={setOpen} />
+        <ModalAddAlergie
+          open={open}
+          setOpen={setOpen}
+          changeData={changeData}
+        />
       </Head>
-      <CustomTable
+      {data.allergies.length ? (
-        zeroRadius={true}
+        <CustomTable
-        tableHead={tableHead}
+          zeroRadius={true}
-        centerTable={centerTable}
+          tableHead={tableHead}
-      >
+          centerTable={centerTable}
-        {data.allergies.map((row, idx) => (
+        >
-          <TableRow
+          {data.allergies.map((row, idx) => (
-            key={idx}
+            <ItemAllergie
-            className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
+              key={idx}
-          >
+              row={row}
-            <TableCell
+              idx={idx}
-              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+              changeData={changeData}
-              align="center"
+            />
-            >
+          ))}
-              <TextLoading width={15} height={18} loading={false}>
+        </CustomTable>
-                {idx + 1}
+      ) : (
-              </TextLoading>
+        <p className="text-center py-10 text-gray-500">
-            </TableCell>
+          هیچ آلرژی‌ای وجود ندارد!
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        </p>
-              <TextLoading width={15} height={18} loading={false}>
+      )}
-                {row.substance}
-              </TextLoading>
-            </TableCell>
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
-              <TextLoading width={15} height={18} loading={false}>
-                {row.reaction}
-              </TextLoading>
-            </TableCell>
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
-              <TextLoading width={15} height={18} loading={false}>
-                {row.severity}
-              </TextLoading>
-            </TableCell>
-            <TableCell
-              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
-              align="right"
-            >
-              <div className="flex items-center justify-center gap-[4px]">
-                <Button className="!min-w-fit !p-1" variant="text">
-                  <TrashB />
-                </Button>
-                <Button className="!min-w-fit !p-1" variant="text">
-                  <EditB />
-                </Button>
-              </div>
-            </TableCell>
-          </TableRow>
-        ))}
-      </CustomTable>
     </div>
   );
 }

components/dashboard/userAccount/tabs/allergies/modal/Content.js

@@ -1,24 +1,47 @@
 import FieldLabel from "@/components/contactUs/FieldLabel";
 import Field from "@/app/component/Field";
-import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+import AutoSelector from "@/app/component/element/AutoSelector";
 
 const listIntensity = [
-  { label: "خفیف" },
-  { label: "متوسط" },
   { label: "شدید" },
+  { label: "متوسط" },
+  { label: "خفیف" },
 ];
 
-function Content() {
+function Content({ setData, data }) {
+  const handleChange = (name, value) =>
+    setData((prev) => ({ ...prev, [name]: value }));
+
   return (
     <div className="mt-[32px] md:mt-[36px] lg:mt-[40px] flex flex-col gap-[24px] md:gap-[28px] lg:gap-[32px] px-0 sm:px-[52px]">
       <FieldLabel title="ماده آلرژی‌زا">
-        <Field isPlaceHolder={true} title="" type="text" />
+        <Field
+          title=""
+          type="text"
+          name="substance"
+          isPlaceHolder={true}
+          value={data?.substance}
+          handleChange={handleChange}
+        />
       </FieldLabel>
       <FieldLabel title="واکنش">
-        <Field isPlaceHolder={true} title="" type="text" />
+        <Field
+          title=""
+          type="text"
+          name="reaction"
+          isPlaceHolder={true}
+          value={data?.reaction}
+          handleChange={handleChange}
+        />
       </FieldLabel>
       <FieldLabel title="ماده آلرژی‌زا">
-        <AutoCompleteSelect list={listIntensity} label="شدت" />
+        <AutoSelector
+          label="شدت"
+          name="severity"
+          list={listIntensity}
+          value={data?.severity}
+          updateData={handleChange}
+        />
       </FieldLabel>
     </div>
   );

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

@@ -3,10 +3,27 @@ import AddBtn from "../../../components/AddBtn";
 import UpdateBtn from "../../../components/UpdateBtn";
 import { Button, Modal } from "@mui/material";
 import Content from "./Content";
+import { useState } from "react";
+
+function ModalAddAlergie({ open, setOpen, changeData }) {
+  const contentItem = {
+    substance: "",
+    reaction: "",
+    severity: "",
+  };
 
-function ModalAddAlergie({ open, setOpen }) {
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
+  const [newItem, setNewItem] = useState({
+    substance: "",
+    reaction: "",
+    severity: "",
+  });
+  const handleAddData = () => {
+    changeData("add", "allergies", null, newItem);
+    setNewItem(contentItem);
+    handleClose();
+  };
 
   return (
     <>
@@ -25,16 +42,19 @@ function ModalAddAlergie({ open, setOpen }) {
         >
           <div>
             <div className="flex justify-between w-full">
-              <p className="text-[#3B3B3B] text-[20px] font-bold">اضافه کردن آلرژی</p>
+              <p className="text-[#3B3B3B] text-[20px] font-bold">
+                اضافه کردن آلرژی
+              </p>
             </div>
-            <Content />
+            <Content setData={setNewItem} />
           </div>
           <Button
             className="!mt-[32px] md:!mt-[36px] lg:!mt-[40px] !px-3 !py-2 !text-[16px] !font-medium !w-fit !mr-auto"
-            onClick={handleClose}
+            onClick={handleAddData}
+            disabled={!newItem.reaction || !newItem.severity || !newItem.substance}
             variant="contained"
           >
-            اعمال تغییرات
+            اضافه کردن
           </Button>
         </div>
       </Modal>

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

@@ -4,7 +4,7 @@ import { Switch, TableCell, TableRow } from "@mui/material";
 import Head from "../../components/Head";
 import UpdateBtn from "../../components/UpdateBtn";
 
-function Disease({ data }) {
+function Disease({ data, changeData }) {
   const tableHead = ["ردیف", "اسم", "وضعیت", ""];
   const centerTable = [0];
 
@@ -38,7 +38,14 @@ function Disease({ data }) {
             </TableCell>
             <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
               <TextLoading width={15} height={18} loading={false}>
-                <Switch defaultChecked={row.status === "true"} />
+                <Switch
+                  defaultChecked={row.status === "true"}
+                  onChange={(e) => {
+                    const newData = row;
+                    newData.status = JSON.stringify(e.target.checked);
+                    changeData("update", "disease", idx, newData);
+                  }}
+                />
               </TextLoading>
             </TableCell>
           </TableRow>

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

@@ -0,0 +1,65 @@
+import ModalDeleteItem from "../../components/modal/ModalDeleteItem";
+import TextLoading from "@/app/component/loading/Text";
+import { TableCell, TableRow } from "@mui/material";
+import ModalEditItem from "../../components/modal/ModalEditItem";
+import Content from "./modal/Content";
+import { useState } from "react";
+
+function ItemHistory({ row, idx, changeData }) {
+  const contentData = {
+    relation: row.relation,
+    disease: row.disease,
+  };
+  const [data, setData] = useState(contentData);
+  const resetData = () => setData(contentData);
+
+  return (
+    <TableRow
+      key={idx}
+      className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
+    >
+      <TableCell
+        className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+        align="center"
+      >
+        <TextLoading width={15} height={18} loading={false}>
+          {idx + 1}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        <TextLoading width={15} height={18} loading={false}>
+          {row.relation}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        <TextLoading width={15} height={18} loading={false}>
+          {row.disease}
+        </TextLoading>
+      </TableCell>
+      <TableCell
+        className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+        align="right"
+      >
+        <div className="flex items-center justify-center gap-[4px]">
+          <ModalDeleteItem
+            id={idx}
+            name="family_history"
+            changeData={changeData}
+          />
+          <ModalEditItem
+            id={idx}
+            data={data}
+            title="سابقه خانوادگی"
+            name="family_history"
+            resetData={resetData}
+            changeData={changeData}
+          >
+            <Content data={data} setData={setData} />
+          </ModalEditItem>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export default ItemHistory;

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

@@ -1,13 +1,10 @@
 import CustomTable from "@/app/component/CustomTable";
-import TextLoading from "@/app/component/loading/Text";
-import EditB from "@/components/icons/EditB";
-import TrashB from "@/components/icons/TrashB";
-import { Button, TableCell, TableRow } from "@mui/material";
 import Head from "../../components/Head";
 import { useState } from "react";
 import ModalAddHistory from "./modal";
+import ItemHistory from "./ItemHistory";
 
-function FamilyHistory({ data }) {
+function FamilyHistory({ data, changeData }) {
   const tableHead = ["ردیف", "بیماری", "نسبت خانوادگی", ""];
   const centerTable = [0];
   const [open, setOpen] = useState(false);
@@ -15,52 +12,32 @@ function FamilyHistory({ data }) {
   return (
     <div>
       <Head text="لیست سابقه خانوادگی بیماری">
-        <ModalAddHistory open={open} setOpen={setOpen} />
+        <ModalAddHistory
+          open={open}
+          setOpen={setOpen}
+          changeData={changeData}
+        />
       </Head>
-      <CustomTable
+      {data.medications.length ? (
-        zeroRadius={true}
+        <CustomTable
-        tableHead={tableHead}
+          zeroRadius={true}
-        centerTable={centerTable}
+          tableHead={tableHead}
-      >
+          centerTable={centerTable}
-        {data.family_history.map((row, idx) => (
+        >
-          <TableRow
+          {data.family_history.map((row, idx) => (
-            key={idx}
+            <ItemHistory
-            className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
+              key={idx}
-          >
+              row={row}
-            <TableCell
+              idx={idx}
-              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+              changeData={changeData}
-              align="center"
+            />
-            >
+          ))}
-              <TextLoading width={15} height={18} loading={false}>
+        </CustomTable>
-                {idx + 1}
+      ) : (
-              </TextLoading>
+        <p className="text-center py-10 text-gray-500">
-            </TableCell>
+          هیچ سابقه خانوادگی وجود ندارد!
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        </p>
-              <TextLoading width={15} height={18} loading={false}>
+      )}
-                {row.disease}
-              </TextLoading>
-            </TableCell>
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
-              <TextLoading width={15} height={18} loading={false}>
-                {row.relation}
-              </TextLoading>
-            </TableCell>
-            <TableCell
-              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
-              align="right"
-            >
-              <div className="flex items-center justify-center gap-[4px]">
-                <Button className="!min-w-fit !p-1" variant="text">
-                  <TrashB />
-                </Button>
-                <Button className="!min-w-fit !p-1" variant="text">
-                  <EditB />
-                </Button>
-              </div>
-            </TableCell>
-          </TableRow>
-        ))}
-      </CustomTable>
     </div>
   );
 }

components/dashboard/userAccount/tabs/familyHistory/modal/Content.js

@@ -0,0 +1,34 @@
+import FieldLabel from "@/components/contactUs/FieldLabel";
+import Field from "@/app/component/Field";
+
+function Content({ setData, data }) {
+  const handleChange = (name, value) =>
+    setData((prev) => ({ ...prev, [name]: value }));
+
+  return (
+    <div className="mt-[32px] md:mt-[36px] lg:mt-[40px] flex flex-col gap-[24px] md:gap-[28px] lg:gap-[32px] px-0 sm:px-[52px]">
+      <FieldLabel title="بیماری">
+        <Field
+          title=""
+          type="text"
+          name="relation"
+          isPlaceHolder={true}
+          value={data?.relation}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+      <FieldLabel title="نسبت خانوادگی">
+        <Field
+          title=""
+          type="text"
+          name="disease"
+          isPlaceHolder={true}
+          value={data?.disease}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+    </div>
+  );
+}
+
+export default Content;

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

@@ -2,10 +2,22 @@ import { styleDefault } from "@/mui";
 import AddBtn from "../../../components/AddBtn";
 import UpdateBtn from "../../../components/UpdateBtn";
 import { Button, Modal } from "@mui/material";
+import Content from "./Content";
+import { useState } from "react";
 
-function ModalAddHistory({ open, setOpen }) {
+function ModalAddHistory({ open, setOpen, changeData }) {
+  const contentItem = {
+    relation: "",
+    disease: "",
+  };
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
+  const [newItem, setNewItem] = useState(contentItem);
+  const handleAddData = () => {
+    changeData("add", "family_history", null, newItem);
+    setNewItem(contentItem);
+    handleClose();
+  };
 
   return (
     <>
@@ -24,16 +36,19 @@ function ModalAddHistory({ open, setOpen }) {
         >
           <div>
             <div className="flex justify-between w-full">
-              <p className="text-[#3B3B3B] text-[20px] font-bold">اضافه کردن سابقه خانوادگی بیماری</p>
+              <p className="text-[#3B3B3B] text-[20px] font-bold">
+                اضافه کردن سابقه خانوادگی بیماری
+              </p>
             </div>
-            {/* <Content /> */}
+            <Content setData={setNewItem} />
           </div>
           <Button
             className="!mt-[32px] md:!mt-[36px] lg:!mt-[40px] !px-3 !py-2 !text-[16px] !font-medium !w-fit !mr-auto"
-            onClick={handleClose}
+            onClick={handleAddData}
+            disabled={!newItem.relation || !newItem.disease}
             variant="contained"
           >
-            اعمال تغییرات
+            اضافه کردن
           </Button>
         </div>
       </Modal>

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

@@ -0,0 +1,71 @@
+import ModalDeleteItem from "../../components/modal/ModalDeleteItem";
+import TextLoading from "@/app/component/loading/Text";
+import { TableCell, TableRow } from "@mui/material";
+import ModalEditItem from "../../components/modal/ModalEditItem";
+import Content from "./modal/Content";
+import { useState } from "react";
+
+function ItemMedication({ row, idx, changeData }) {
+  const contentData = {
+    name: row.name,
+    dose: row.dose,
+    frequency: row.frequency,
+  };
+  const [data, setData] = useState(contentData);
+  const resetData = () => setData(contentData);
+
+  return (
+    <TableRow
+      key={idx}
+      className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
+    >
+      <TableCell
+        className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+        align="center"
+      >
+        <TextLoading width={15} height={18} loading={false}>
+          {idx + 1}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        <TextLoading width={15} height={18} loading={false}>
+          {row.name}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        <TextLoading width={15} height={18} loading={false}>
+          {row.dose}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        <TextLoading width={15} height={18} loading={false}>
+          {row.frequency}
+        </TextLoading>
+      </TableCell>
+      <TableCell
+        className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+        align="right"
+      >
+        <div className="flex items-center justify-center gap-[4px]">
+          <ModalDeleteItem
+            id={idx}
+            name="medications"
+            changeData={changeData}
+          />
+          <ModalEditItem
+            id={idx}
+            data={data}
+            title="داروی مصرفی"
+            name="medications"
+            resetData={resetData}
+            changeData={changeData}
+          >
+            <Content data={data} setData={setData} />
+          </ModalEditItem>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export default ItemMedication;

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

@@ -1,13 +1,10 @@
 import CustomTable from "@/app/component/CustomTable";
-import TextLoading from "@/app/component/loading/Text";
-import EditB from "@/components/icons/EditB";
-import TrashB from "@/components/icons/TrashB";
-import { Button, TableCell, TableRow } from "@mui/material";
 import Head from "../../components/Head";
 import ModalAddMedications from "./modal";
 import { useState } from "react";
+import ItemMedication from "./ItemMedication";
 
-function Medications({ data }) {
+function Medications({ data, changeData }) {
   const tableHead = ["ردیف", "نام دارو", "دوز مصرفی", "تعداد و زمان مصرف", ""];
   const centerTable = [0];
   const [open, setOpen] = useState(false);
@@ -15,57 +12,32 @@ function Medications({ data }) {
   return (
     <div>
       <Head text="لیست دارو های مصرفی">
-        <ModalAddMedications open={open} setOpen={setOpen} />
+        <ModalAddMedications
+          open={open}
+          setOpen={setOpen}
+          changeData={changeData}
+        />
       </Head>
-      <CustomTable
+      {data.medications.length ? (
-        zeroRadius={true}
+        <CustomTable
-        tableHead={tableHead}
+          zeroRadius={true}
-        centerTable={centerTable}
+          tableHead={tableHead}
-      >
+          centerTable={centerTable}
-        {data.medications.map((row, idx) => (
+        >
-          <TableRow
+          {data.medications.map((row, idx) => (
-            key={idx}
+            <ItemMedication
-            className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
+              key={idx}
-          >
+              row={row}
-            <TableCell
+              idx={idx}
-              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+              changeData={changeData}
-              align="center"
+            />
-            >
+          ))}
-              <TextLoading width={15} height={18} loading={false}>
+        </CustomTable>
-                {idx + 1}
+      ) : (
-              </TextLoading>
+        <p className="text-center py-10 text-gray-500">
-            </TableCell>
+          هیچ داروی مصرفی وجود ندارد!
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        </p>
-              <TextLoading width={15} height={18} loading={false}>
+      )}
-                {row.name}
-              </TextLoading>
-            </TableCell>
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
-              <TextLoading width={15} height={18} loading={false}>
-                {row.dose}
-              </TextLoading>
-            </TableCell>
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
-              <TextLoading width={15} height={18} loading={false}>
-                {row.frequency}
-              </TextLoading>
-            </TableCell>
-            <TableCell
-              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
-              align="right"
-            >
-              <div className="flex items-center justify-center gap-[4px]">
-                <Button className="!min-w-fit !p-1" variant="text">
-                  <TrashB />
-                </Button>
-                <Button className="!min-w-fit !p-1" variant="text">
-                  <EditB />
-                </Button>
-              </div>
-            </TableCell>
-          </TableRow>
-        ))}
-      </CustomTable>
     </div>
   );
 }

components/dashboard/userAccount/tabs/medications/modal/Content.js

@@ -0,0 +1,44 @@
+import FieldLabel from "@/components/contactUs/FieldLabel";
+import Field from "@/app/component/Field";
+
+function Content({ setData, data }) {
+  const handleChange = (name, value) =>
+    setData((prev) => ({ ...prev, [name]: value }));
+
+  return (
+    <div className="mt-[32px] md:mt-[36px] lg:mt-[40px] flex flex-col gap-[24px] md:gap-[28px] lg:gap-[32px] px-0 sm:px-[52px]">
+      <FieldLabel title="نام دارو">
+        <Field
+          title=""
+          type="text"
+          name="name"
+          isPlaceHolder={true}
+          value={data?.name}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+      <FieldLabel title="دوز مصرفی (mg)">
+        <Field
+          title=""
+          type="number"
+          name="dose"
+          isPlaceHolder={true}
+          value={data?.dose.match(/\d+/)[0]}
+          handleChange={(name, value) => handleChange(name, `${value}mg`)}
+        />
+      </FieldLabel>
+      <FieldLabel title="تعداد و زمان مصرف">
+        <Field
+          title=""
+          type="text"
+          name="frequency"
+          isPlaceHolder={true}
+          value={data?.frequency}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+    </div>
+  );
+}
+
+export default Content;

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

@@ -2,10 +2,24 @@ import { styleDefault } from "@/mui";
 import AddBtn from "../../../components/AddBtn";
 import UpdateBtn from "../../../components/UpdateBtn";
 import { Button, Modal } from "@mui/material";
+import { useState } from "react";
+import Content from "./Content";
+
+function ModalAddMedications({ open, setOpen, changeData }) {
+  const contentItem = {
+    name: "",
+    dose: "",
+    frequency: "",
+  };
 
-function ModalAddMedications({ open, setOpen }) {
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
+  const [newItem, setNewItem] = useState(contentItem);
+  const handleAddData = () => {
+    changeData("add", "medications", null, newItem);
+    setNewItem(contentItem);
+    handleClose();
+  };
 
   return (
     <>
@@ -24,16 +38,19 @@ function ModalAddMedications({ open, setOpen }) {
         >
           <div>
             <div className="flex justify-between w-full">
-              <p className="text-[#3B3B3B] text-[20px] font-bold">اضافه کردن دارو های مصرفی</p>
+              <p className="text-[#3B3B3B] text-[20px] font-bold">
+                اضافه کردن دارو های مصرفی
+              </p>
             </div>
-            {/* <Content /> */}
+            <Content setData={setNewItem} />
           </div>
           <Button
             className="!mt-[32px] md:!mt-[36px] lg:!mt-[40px] !px-3 !py-2 !text-[16px] !font-medium !w-fit !mr-auto"
-            onClick={handleClose}
+            onClick={handleAddData}
+            disabled={!newItem.name || !newItem.dose || !newItem.frequency}
             variant="contained"
           >
-            اعمال تغییرات
+            اضافه کردن
           </Button>
         </div>
       </Modal>

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

@@ -0,0 +1,71 @@
+import ModalDeleteItem from "../../components/modal/ModalDeleteItem";
+import TextLoading from "@/app/component/loading/Text";
+import { TableCell, TableRow } from "@mui/material";
+import ModalEditItem from "../../components/modal/ModalEditItem";
+import Content from "./modal/Content";
+import { useState } from "react";
+
+function ItemRelatives({ row, idx, changeData }) {
+  const contentData = {
+    name: row.name,
+    relation: row.relation,
+    phone: row.contact.phone,
+    address: row.contact.address,
+  };
+  const [data, setData] = useState(contentData);
+  const resetData = () => setData(contentData);
+
+  return (
+    <TableRow
+      key={idx}
+      className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
+    >
+      <TableCell
+        className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+        align="center"
+      >
+        <TextLoading width={15} height={18} loading={false}>
+          {idx + 1}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        <TextLoading width={15} height={18} loading={false}>
+          {row.name}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        <TextLoading width={15} height={18} loading={false}>
+          {row.relation}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        <TextLoading width={15} height={18} loading={false}>
+          {`${row.contact.phone?.replace("+", "")}+`}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        {row.contact.address}
+      </TableCell>
+      <TableCell
+        className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+        align="right"
+      >
+        <div className="flex items-center justify-center gap-[4px]">
+          <ModalDeleteItem id={idx} name="relatives" changeData={changeData} />
+          <ModalEditItem
+            id={idx}
+            data={data}
+            name="relatives"
+            title="داروی مصرفی"
+            resetData={resetData}
+            changeData={changeData}
+          >
+            <Content data={data} setData={setData} />
+          </ModalEditItem>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export default ItemRelatives;

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

@@ -1,13 +1,10 @@
 import CustomTable from "@/app/component/CustomTable";
-import TextLoading from "@/app/component/loading/Text";
-import EditB from "@/components/icons/EditB";
-import TrashB from "@/components/icons/TrashB";
-import { Button, TableCell, TableRow, Tooltip } from "@mui/material";
 import Head from "../../components/Head";
 import ModalAddRelatives from "./modal";
 import { useState } from "react";
+import ItemRelatives from "./ItemRelatives";
 
-function Relatives({ data }) {
+function Relatives({ data, changeData }) {
   const tableHead = ["ردیف", "نام", "نسبت", "شماره تماس", "آدرس", ""];
   const centerTable = [0];
   const [open, setOpen] = useState(false);
@@ -15,61 +12,32 @@ function Relatives({ data }) {
   return (
     <div>
       <Head text="لیست بستگان">
-        <ModalAddRelatives open={open} setOpen={setOpen} />
+        <ModalAddRelatives
+          open={open}
+          setOpen={setOpen}
+          changeData={changeData}
+        />
       </Head>
-      <CustomTable
+      {data.medications.length ? (
-        zeroRadius={true}
+        <CustomTable
-        tableHead={tableHead}
+          zeroRadius={true}
-        centerTable={centerTable}
+          tableHead={tableHead}
-      >
+          centerTable={centerTable}
-        {data.relatives.map((row, idx) => (
+        >
-          <TableRow
+          {data.relatives.map((row, idx) => (
-            key={idx}
+            <ItemRelatives
-            className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
+              key={idx}
-          >
+              row={row}
-            <TableCell
+              idx={idx}
-              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+              changeData={changeData}
-              align="center"
+            />
-            >
+          ))}
-              <TextLoading width={15} height={18} loading={false}>
+        </CustomTable>
-                {idx + 1}
+      ) : (
-              </TextLoading>
+        <p className="text-center py-10 text-gray-500">
-            </TableCell>
+          هیچ داروی مصرفی وجود ندارد!
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        </p>
-              <TextLoading width={15} height={18} loading={false}>
+      )}
-                {row.name}
-              </TextLoading>
-            </TableCell>
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
-              <TextLoading width={15} height={18} loading={false}>
-                {row.relation}
-              </TextLoading>
-            </TableCell>
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
-              <TextLoading width={15} height={18} loading={false}>
-                {`${row.contact.phone?.replace("+", "")}+`}
-              </TextLoading>
-            </TableCell>
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
-              {row.contact.address}
-            </TableCell>
-
-            <TableCell
-              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
-              align="right"
-            >
-              <div className="flex items-center justify-center gap-[4px]">
-                <Button className="!min-w-fit !p-1" variant="text">
-                  <TrashB />
-                </Button>
-                <Button className="!min-w-fit !p-1" variant="text">
-                  <EditB />
-                </Button>
-              </div>
-            </TableCell>
-          </TableRow>
-        ))}
-      </CustomTable>
     </div>
   );
 }

components/dashboard/userAccount/tabs/relatives/modal/Content.js

@@ -0,0 +1,55 @@
+import FieldLabel from "@/components/contactUs/FieldLabel";
+import Field from "@/app/component/Field";
+
+function Content({ setData, data }) {
+  const handleChange = (name, value) =>
+    setData((prev) => ({ ...prev, [name]: value }));
+  console.log(data);
+
+  return (
+    <div className="mt-[32px] md:mt-[36px] lg:mt-[40px] flex flex-col gap-[24px] md:gap-[28px] lg:gap-[32px] px-0 sm:px-[52px]">
+      <FieldLabel title="نام">
+        <Field
+          title=""
+          type="text"
+          name="name"
+          isPlaceHolder={true}
+          value={data?.name}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+      <FieldLabel title="نسبت">
+        <Field
+          title=""
+          type="text"
+          name="relation"
+          isPlaceHolder={true}
+          value={data?.relation}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+      <FieldLabel title="شماره تماس">
+        <Field
+          title=""
+          type="number"
+          name="phone"
+          isPlaceHolder={true}
+          value={Number(data?.phone.replace(/^\+/, ""))}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+      <FieldLabel title="آدرس">
+        <Field
+          title=""
+          type="text"
+          name="address"
+          isPlaceHolder={true}
+          value={data?.address}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+    </div>
+  );
+}
+
+export default Content;

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

@@ -2,10 +2,34 @@ import { styleDefault } from "@/mui";
 import AddBtn from "../../../components/AddBtn";
 import UpdateBtn from "../../../components/UpdateBtn";
 import { Button, Modal } from "@mui/material";
+import Content from "./Content";
+import { useState } from "react";
+
+function ModalAddRelatives({ open, setOpen, changeData }) {
+  const contentItem = {
+    name: "",
+    relation: "",
+    phone: "",
+    address: "",
+  };
 
-function ModalAddRelatives({ open, setOpen }) {
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
+  const [newItem, setNewItem] = useState(contentItem);
+  const handleAddData = () => {
+    const changedKey = {
+      name: newItem.name,
+      relation: newItem.relation,
+      contact: {
+        phone: newItem.phone,
+        address: newItem.address,
+      },
+    };
+
+    changeData("add", "relatives", null, changedKey);
+    setNewItem(contentItem);
+    handleClose();
+  };
 
   return (
     <>
@@ -24,16 +48,24 @@ function ModalAddRelatives({ open, setOpen }) {
         >
           <div>
             <div className="flex justify-between w-full">
-              <p className="text-[#3B3B3B] text-[20px] font-bold">اضافه کردن بستگان</p>
+              <p className="text-[#3B3B3B] text-[20px] font-bold">
+                اضافه کردن بستگان
+              </p>
             </div>
-            {/* <Content /> */}
+            <Content setData={setNewItem} />
           </div>
           <Button
             className="!mt-[32px] md:!mt-[36px] lg:!mt-[40px] !px-3 !py-2 !text-[16px] !font-medium !w-fit !mr-auto"
-            onClick={handleClose}
+            onClick={handleAddData}
+            disabled={
+              !newItem.name ||
+              !newItem.relation ||
+              !newItem.phone ||
+              !newItem.address
+            }
             variant="contained"
           >
-            اعمال تغییرات
+            اضافه کردن
           </Button>
         </div>
       </Modal>

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

@@ -0,0 +1,70 @@
+import ModalDeleteItem from "../../components/modal/ModalDeleteItem";
+import TextLoading from "@/app/component/loading/Text";
+import { TableCell, TableRow } from "@mui/material";
+import ModalEditItem from "../../components/modal/ModalEditItem";
+import Content from "./modal/Content";
+import { useState } from "react";
+
+function ItemSurgeries({ row, idx, changeData }) {
+  const contentData = {
+    type: row.type,
+    year: row.year,
+    hospital: row.hospital,
+  };
+  const [data, setData] = useState(contentData);
+  const resetData = () => setData(contentData);
+
+  return (
+    <TableRow
+      key={idx}
+      className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
+    >
+      <TableCell
+        className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+        align="center"
+      >
+        <TextLoading width={15} height={18} loading={false}>
+          {idx + 1}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        <TextLoading width={15} height={18} loading={false}>
+          {row.type}
+        </TextLoading>
+      </TableCell>
+      <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
+        <TextLoading width={15} height={18} loading={false}>
+          {row.hospital}
+        </TextLoading>
+      </TableCell>
+      <TableCell
+        className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+        align="center"
+      >
+        <TextLoading width={15} height={18} loading={false}>
+          {row.year}
+        </TextLoading>
+      </TableCell>
+      <TableCell
+        className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+        align="right"
+      >
+        <div className="flex items-center justify-center gap-[4px]">
+          <ModalDeleteItem id={idx} name="surgeries" changeData={changeData} />
+          <ModalEditItem
+            id={idx}
+            data={data}
+            title="جراحی"
+            name="surgeries"
+            resetData={resetData}
+            changeData={changeData}
+          >
+            <Content data={data} setData={setData} />
+          </ModalEditItem>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export default ItemSurgeries;

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

@@ -6,8 +6,9 @@ import { Button, TableCell, TableRow } from "@mui/material";
 import Head from "../../components/Head";
 import ModalAddSurgeries from "./modal";
 import { useState } from "react";
+import ItemSurgeries from "./ItemSurgeries";
 
-function Surgeries({ data }) {
+function Surgeries({ data, updateData, changeData }) {
   const tableHead = [
     "ردیف",
     "نوع جراحی",
@@ -21,60 +22,30 @@ function Surgeries({ data }) {
   return (
     <div>
       <Head text="لیست جراحی ها">
-        <ModalAddSurgeries open={open} setOpen={setOpen} />
+        <ModalAddSurgeries
+          open={open}
+          setOpen={setOpen}
+          changeData={changeData}
+        />
       </Head>
-      <CustomTable
+      {data.surgeries.length ? (
-        zeroRadius={true}
+        <CustomTable
-        tableHead={tableHead}
+          zeroRadius={true}
-        centerTable={centerTable}
+          tableHead={tableHead}
-      >
+          centerTable={centerTable}
-        {data.surgeries.map((row, idx) => (
+        >
-          <TableRow
+          {data.surgeries.map((row, idx) => (
-            key={idx}
+            <ItemSurgeries
-            className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
+              key={idx}
-          >
+              row={row}
-            <TableCell
+              idx={idx}
-              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+              changeData={changeData}
-              align="center"
+            />
-            >
+          ))}
-              <TextLoading width={15} height={18} loading={false}>
+        </CustomTable>
-                {idx + 1}
+      ) : (
-              </TextLoading>
+        <p className="text-center py-10 text-gray-500">هیچ جراحی وجود ندارد!</p>
-            </TableCell>
+      )}
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
-              <TextLoading width={15} height={18} loading={false}>
-                {row.type}
-              </TextLoading>
-            </TableCell>
-            <TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
-              <TextLoading width={15} height={18} loading={false}>
-                {row.hospital}
-              </TextLoading>
-            </TableCell>
-            <TableCell
-              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
-              align="center"
-            >
-              <TextLoading width={15} height={18} loading={false}>
-                {row.year}
-              </TextLoading>
-            </TableCell>
-            <TableCell
-              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
-              align="right"
-            >
-              <div className="flex items-center justify-center gap-[4px]">
-                <Button className="!min-w-fit !p-1" variant="text">
-                  <TrashB />
-                </Button>
-                <Button className="!min-w-fit !p-1" variant="text">
-                  <EditB />
-                </Button>
-              </div>
-            </TableCell>
-          </TableRow>
-        ))}
-      </CustomTable>
     </div>
   );
 }

components/dashboard/userAccount/tabs/surgeries/modal/Content.js

@@ -0,0 +1,50 @@
+import FieldLabel from "@/components/contactUs/FieldLabel";
+import Field from "@/app/component/Field";
+
+const listIntensity = [
+  { label: "شدید" },
+  { label: "متوسط" },
+  { label: "خفیف" },
+];
+
+function Content({ setData, data }) {
+  const handleChange = (name, value) =>
+    setData((prev) => ({ ...prev, [name]: value }));
+
+  return (
+    <div className="mt-[32px] md:mt-[36px] lg:mt-[40px] flex flex-col gap-[24px] md:gap-[28px] lg:gap-[32px] px-0 sm:px-[52px]">
+      <FieldLabel title="نوع جراحی">
+        <Field
+          title=""
+          type="text"
+          name="type"
+          isPlaceHolder={true}
+          value={data?.type}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+      <FieldLabel title="نام بیمارستان">
+        <Field
+          title=""
+          type="text"
+          name="hospital"
+          isPlaceHolder={true}
+          value={data?.hospital}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+      <FieldLabel title="سال انجام جراحی">
+        <Field
+          title=""
+          type="number"
+          name="year"
+          isPlaceHolder={true}
+          value={data?.year}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+    </div>
+  );
+}
+
+export default Content;

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

@@ -2,10 +2,24 @@ import { styleDefault } from "@/mui";
 import AddBtn from "../../../components/AddBtn";
 import UpdateBtn from "../../../components/UpdateBtn";
 import { Button, Modal } from "@mui/material";
+import Content from "./Content";
+import { useState } from "react";
+
+function ModalAddSurgeries({ open, setOpen, changeData }) {
+  const contentItem = {
+    type: "",
+    year: "",
+    hospital: "",
+  };
 
-function ModalAddSurgeries({ open, setOpen }) {
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
+  const [newItem, setNewItem] = useState(contentItem);
+  const handleAddData = () => {
+    changeData("add", "surgeries", null, newItem);
+    setNewItem(contentItem);
+    handleClose();
+  };
 
   return (
     <>
@@ -24,16 +38,19 @@ function ModalAddSurgeries({ open, setOpen }) {
         >
           <div>
             <div className="flex justify-between w-full">
-              <p className="text-[#3B3B3B] text-[20px] font-bold">اضافه کردن جراحی</p>
+              <p className="text-[#3B3B3B] text-[20px] font-bold">
+                اضافه کردن جراحی
+              </p>
             </div>
-            {/* <Content /> */}
+            <Content setData={setNewItem} />
           </div>
           <Button
             className="!mt-[32px] md:!mt-[36px] lg:!mt-[40px] !px-3 !py-2 !text-[16px] !font-medium !w-fit !mr-auto"
-            onClick={handleClose}
+            onClick={handleAddData}
+            disabled={!newItem.type || !newItem.year || !newItem.hospital}
             variant="contained"
           >
-            اعمال تغییرات
+            اضافه کردن
           </Button>
         </div>
       </Modal>