dashboard design and functionality and data and page doctor and clinic change data

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

@@ -1,6 +1,5 @@
 import Content from "./Content";
 import EditField from "@/app/component/EditField";
-import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import DateBirthday from "./DateBirthday";
 import {
   insurance,
@@ -10,8 +9,11 @@ import {
   education,
   job,
 } from "./listSelector";
+import AutoSelector from "@/app/component/element/AutoSelector";
+
+function Form({ data, changeData, selected, updateSelect }) {
+  const findVal = (list, name) => list.find((g) => g.id === selected[name]);
 
-function Form({ data, changeData, updateSelect }) {
   return (
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-[24px]">
       <Content title="شماره موبایل" isConfirmed={true}>
@@ -44,8 +46,11 @@ function Form({ data, changeData, updateSelect }) {
         />
       </Content>
       <Content title="جنسیت">
-        <AutoCompleteSelect
-          updateData={updateSelect}
+        <AutoSelector
+          updateData={(name, data) =>
+            updateSelect(name, data === "زن" ? "female" : "male")
+          }
+          value={findVal(gender, "gender")}
           label="جنسیت"
           name="gender"
           list={gender}
@@ -68,8 +73,9 @@ function Form({ data, changeData, updateSelect }) {
         />
       </Content>
       <Content title="نوع بیمه">
-        <AutoCompleteSelect
+        <AutoSelector
           updateData={updateSelect}
+          value={findVal(insurance, "insurance")}
           label="نوع بیمه"
           name="insurance"
           list={insurance}
@@ -86,16 +92,22 @@ function Form({ data, changeData, updateSelect }) {
         />
       </Content>
       <Content title="گروه خونی">
-        <AutoCompleteSelect
-          updateData={updateSelect}
+        <AutoSelector
+          updateData={(name, value) =>
+            updateSelect(name, blood_group.find((g) => g.label === value).id)
+          }
+          value={findVal(blood_group, "blood_group")}
           label="گروه خونی"
           name="blood_group"
           list={blood_group}
         />
       </Content>
       <Content title="وضعیت تاهل">
-        <AutoCompleteSelect
-          updateData={updateSelect}
+        <AutoSelector
+          updateData={(name, value) =>
+            updateSelect(name, marital_status.find((g) => g.label === value).id)
+          }
+          value={findVal(marital_status, "marital_status")}
           label="وضعیت تاهل"
           name="marital_status"
           list={marital_status}
@@ -112,16 +124,22 @@ function Form({ data, changeData, updateSelect }) {
         />
       </Content>
       <Content title="تحصیلات">
-        <AutoCompleteSelect
-          updateData={updateSelect}
+        <AutoSelector
+          updateData={(name, value) =>
+            updateSelect(name, education.find((g) => g.label === value).id)
+          }
+          value={findVal(education, "education")}
           label="تحصیلات"
           name="education"
           list={education}
         />
       </Content>
       <Content title="شغل">
-        <AutoCompleteSelect
-          updateData={updateSelect}
+        <AutoSelector
+          updateData={(name, value) =>
+            updateSelect(name, job.find((g) => g.label === value).id)
+          }
+          value={findVal(job, "job")}
           label="شغل"
           name="job"
           list={job}