change component folders && add multipleselector && send img of doctor page && send skills to create doctor item

app/component/selectors/MultipleSelect.js

@@ -0,0 +1,72 @@
+import OutlinedInput from "@mui/material/OutlinedInput";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import { styleTextSelectRight } from "@/mui";
+import IconMultipleSelect from "@/components/icons/IconMultipleSelect";
+
+export default function MultipleSelect({ value, updateData, name, list }) {
+  const handleChange = (event) => {
+    const {
+      target: { value },
+    } = event;
+    const newVal = typeof value === "string" ? value.split(",") : value;
+    updateData(newVal, "value", name);
+  };
+
+  return (
+    <div className="auto-complete-selector w-full">
+      <Select
+        multiple
+        displayEmpty
+        value={value}
+        onChange={handleChange}
+        input={<OutlinedInput />}
+        IconComponent={IconMultipleSelect}
+        className=""
+        sx={{
+          ...styleTextSelectRight,
+          width: "100% !important",
+          "& .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",
+            },
+        }}
+      >
+        {list.map((item) => (
+          <MenuItem
+            key={item.id || item.uuid}
+            value={item.id}
+            selected={value.includes(item.id)}
+            className={`!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1]
+    ${
+      value.includes(item.id)
+        ? "dark:!bg-[#35343D] !bg-[#F1F1F1]"
+        : "dark:!bg-[#1F1D2B] !bg-[#FFF]"
+    } 
+    hover:dark:!bg-[#35343D] hover:!bg-[#F5F5F5]`}
+          >
+            {item.name || item.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </div>
+  );
+}

components/appointment/detail/Form.js

@@ -1,5 +1,5 @@
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
-import EditField from "../../../app/component/EditField";
+import EditField from "../../../app/component/fields/EditField";
 import Content from "./Content";
 
 const bime = [

components/contactUs/Connect.js

@@ -1,7 +1,7 @@
 import ArrowLeftC from "../icons/ArrowLeftC";
 import { Button } from "@mui/material";
 import FieldLabel from "./FieldLabel";
-import Field from "@/app/component/Field";
+import Field from "@/app/component/fields/Field";
 
 function Connect() {
   return (

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

@@ -1,5 +1,5 @@
 import FieldLabel from "@/components/contactUs/FieldLabel";
-import Field from "@/app/component/Field";
+import Field from "@/app/component/fields/Field";
 import AutoSelector from "@/app/component/element/AutoSelector";
 
 const listIntensity = [

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

@@ -1,5 +1,5 @@
 import FieldLabel from "@/components/contactUs/FieldLabel";
-import Field from "@/app/component/Field";
+import Field from "@/app/component/fields/Field";
 
 function Content({ setData, data }) {
   const handleChange = (name, value) =>

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

@@ -1,5 +1,5 @@
 import FieldLabel from "@/components/contactUs/FieldLabel";
-import Field from "@/app/component/Field";
+import Field from "@/app/component/fields/Field";
 
 function Content({ setData, data }) {
   const handleChange = (name, value) =>

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

@@ -1,5 +1,5 @@
 import FieldLabel from "@/components/contactUs/FieldLabel";
-import Field from "@/app/component/Field";
+import Field from "@/app/component/fields/Field";
 
 function Content({ setData, data }) {
   const handleChange = (name, value) =>

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

@@ -1,5 +1,5 @@
 import FieldLabel from "@/components/contactUs/FieldLabel";
-import Field from "@/app/component/Field";
+import Field from "@/app/component/fields/Field";
 
 const listIntensity = [
   { label: "شدید" },

components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { styleDefault } from "@/mui";
 import { Box, Button, Modal, Rating, Slider } from "@mui/material";
 import CloseModalD from "@/components/icons/CloseModalD";
-import Field from "@/app/component/Field";
+import Field from "@/app/component/fields/Field";
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
 import ProgressChange from "@/app/component/ProgressChange";
 import Link from "next/link";

components/icons/IconMultipleSelect.js

@@ -0,0 +1,23 @@
+function IconMultipleSelect() {
+  return (
+    <svg
+      className="cursor-pointer ml-[14px] min-w-[24px] min-h-[24px]"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M19.9181 8.95L13.3981 15.47C12.6281 16.24 11.3681 16.24 10.5981 15.47L4.07812 8.95"
+        stroke="#495057"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default IconMultipleSelect;

components/panel/addDoctor/defaultState.js

@@ -7,7 +7,7 @@ export const defaultState = {
   },
   expertise: { value: "", placeholder: "دندان پزشکی", isEdit: true },
   description: { value: "", isEdit: true },
-  skills: { value: "", isEdit: true },
+  skills: { value: [], isEdit: true },
   time_work: { value: "", isEdit: true },
   phone: { value: "", placeholder: "", isEdit: true },
   degree: { value: "", isEdit: true },

components/panel/addDoctor/form/fields/FieldDate.js

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { convertToJalali } from "@/helper";
-import EditField from "@/app/component/EditField";
+import EditField from "@/app/component/fields/EditField";
 import ButtonDate from "@/app/component/ButtonDate";
 import CalendarPD from "@/components/icons/CalendarPD";
 import ContentText from "@/app/component/ContentText";

components/panel/addDoctor/form/fields/Selector.js

@@ -9,7 +9,7 @@ function Selector({ updateData, nameKey, label, name, list }) {
       options={list}
       getOptionLabel={(option) => option[nameKey] || ""}
       isOptionEqualToValue={(option, value) => option.id === value.id}
-      className="!w-full !rounded-lg auto-complete-selector "
+      className="!w-full !rounded-lg auto-complete-selector"
       onChange={(e, newValue) => {
         if (newValue) {
           updateData && updateData(newValue.id, "value", name);

components/panel/addDoctor/form/index.js

@@ -1,15 +1,18 @@
+import { useEffect, useState } from "react";
 import FieldDate from "./fields/FieldDate";
 import RadioGender from "./fields/RadioGender";
 import SendReq from "./sendReq";
 import Selector from "./fields/Selector";
 
 // Components
-import EditField from "@/app/component/EditField";
+import EditField from "@/app/component/fields/EditField";
 import ContentText from "@/app/component/ContentText";
 
 // Data
 import specialties from "@/data/specialties.json";
 import education from "@/data/education.json";
+import MultipleSelect from "@/app/component/selectors/MultipleSelect";
+import { request } from "@/services/response";
 
 const validate_medical_number = {
   min: 1,
@@ -17,6 +20,8 @@ const validate_medical_number = {
 };
 
 function Form({ image, data, setData, resetData }) {
+  const [services, setServices] = useState([]);
+
   const changeData = (value, type, name) => {
     type !== "isEdit" &&
       setData((prev) => {
@@ -38,6 +43,18 @@ function Form({ image, data, setData, resetData }) {
   };
   const filteredSpe = specialties.filter((item) => item.parent);
 
+  useEffect(() => {
+    request
+      .getDoctorServices()
+      .then((res) => {
+        setServices(res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, []);
+  console.log(services);
+
   return (
     <>
       <div className="mt-[24px] sm-modal scroll-mui md:mt-[26px] lg:mt-[28px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
@@ -86,29 +103,14 @@ function Form({ image, data, setData, resetData }) {
             nameKey="label"
           />
         </ContentText>
-        <ContentText text="توضیحات">
-          <EditField
-            multiline={5}
-            placeholder="درباره سوابق خود توضیحاتی بنویسید..."
-            isTransparent={true}
-            iconGray={true}
-            changeData={changeData}
-            data={data?.description}
-            name="description"
-          />
-        </ContentText>
         <ContentText text="مهارت ها">
-          <EditField
+          <MultipleSelect
-            multiline={5}
-            placeholder="مهارت های خود را بنویسید..."
-            isTransparent={true}
-            iconGray={true}
-            changeData={changeData}
-            data={data?.skills}
             name="skills"
+            list={services}
+            updateData={changeData}
+            value={data?.skills.value}
           />
         </ContentText>
-
         <ContentText text="شماره موبایل">
           <EditField
             isTransparent={true}
@@ -124,6 +126,17 @@ function Form({ image, data, setData, resetData }) {
         <ContentText text="جنسیت">
           <RadioGender changeData={changeData} name="gender" />
         </ContentText>
+        <ContentText text="توضیحات">
+          <EditField
+            multiline={5}
+            placeholder="درباره سوابق خود توضیحاتی بنویسید..."
+            isTransparent={true}
+            iconGray={true}
+            changeData={changeData}
+            data={data?.description}
+            name="description"
+          />
+        </ContentText>
       </div>
       <SendReq img={image} data={data} resetData={resetData} />
     </>

components/panel/addDoctor/form/sendReq/index.js

@@ -4,7 +4,6 @@ import { request } from "@/services/response";
 import { Button } from "@mui/material";
 import { useState } from "react";
 import { transformData } from "./function";
-import { defaultState } from "../../defaultState";
 
 function SendReq({ img, data, resetData }) {
   const [loading, setLoading] = useState(false);

components/panel/addDoctor/index.js

@@ -9,6 +9,7 @@ function AddDoctorPage() {
   const [data, setData] = useState(defaultState);
   const [image, setImage] = useState("");
   console.log(data);
+
   const resetData = () => {
     setData(defaultState);
     setImage();

components/panel/userAccount/account/form/index.js

@@ -3,7 +3,7 @@
 import { useState } from "react";
 
 import ContentText from "../../../../../app/component/ContentText";
-import EditField from "@/app/component/EditField";
+import EditField from "@/app/component/fields/EditField";
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import { bank, city, state } from "./listSelector";
 import AddLocationP from "@/components/icons/AddLocationP";

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

@@ -1,4 +1,4 @@
-import EditField from "@/app/component/EditField";
+import EditField from "@/app/component/fields/EditField";
 import ContentText from "@/app/component/ContentText";
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import { validate_phone_number } from "./validate";

services/response.js

@@ -68,4 +68,6 @@ export const request = {
         "X-CSRF-Token": "",
       },
     }),
+  getDoctorServices: () =>
+    api.get("api/v1/categorys/doctor_services", removeTokenHead),
 };