update src/components/Input/index.js, src/views/Auth/Profile/GenderSwitch/index.js and src/views/Auth/Profile/index.js

src/components/Input/index.js

@@ -19,7 +19,7 @@ export default function Input(props) {
 
   return (
     <div
-      className="input flex flex-col relative dark:bg-opacity-10 w-full"
+      className="flex flex-col relative dark:bg-opacity-10 w-full"
       style={{ width }}
     >
       <label

src/views/Auth/Profile/GenderSwitch/index.js

@@ -14,7 +14,7 @@ export default function GenderSwitch({
       <div className="flex w-full items-center gap-4">
         {options?.map((option, index) => (
           <div
-            className={`rounded-sm py-3 flex-1 transition-all border border-solid border-blueC0 duration-500 cursor-pointer text-center ${
+            className={`rounded-sm py-4 w-1/2 text-tiny lg:flex-auto transition-all border border-solid border-blueC0 duration-500 cursor-pointer text-center ${
               selectedOption === index + 1
                 ? "bg-blueC0 text-white"
                 : "  text-blueC0"

src/views/Auth/Profile/index.js

@@ -71,7 +71,7 @@ function Profile({
   }, [user]);
 
   useEffect(() => {
-    if(isMobile){
+    if (isMobile) {
       setHeaderOptions(headerOptions);
     }
     getProvince();
@@ -321,7 +321,11 @@ function Profile({
           selectedOptions={formData?.provinceId}
           onChange={(name, value) => {
             setFormData({ ...formData, cityId: null, [name]: value });
-            getCity({ provinceId: provinceList.find((province) => province.name === value)?.id });
+            getCity({
+              provinceId: provinceList.find(
+                (province) => province.name === value
+              )?.id,
+            });
           }}
         />
         <Select
@@ -457,6 +461,63 @@ function Profile({
           direction={"ltr"}
         />
       </div>
+      <div
+        className={`w-full flex lg:justify-between lg:flex-row flex-col gap-5 lg:my-2 lg:items-end`}
+      >
+        <Gender
+          options={[window.t("دانش آموز"), window.t("معلم")]}
+          name="status"
+          label={window.t("عنوان")}
+          selectedOption={formData?.status}
+          onChange={(name, value) => {
+            setFormData({
+              ...formData,
+              gradeIds: formData?.gradeIds?.slice(0, 1) || [],
+              [name]: value,
+            });
+          }}
+        />
+      </div>
+      {formData?.status === 1 ? (
+        <div
+          className={`w-full flex lg:flex-row items-center flex-col gap-5 lg:my-2 lg:items-center`}
+        >
+          <Input
+            name="schools"
+            label={window.t("نام مدرسه")}
+            value={formData?.schoolId}
+            regex={(val) => onInput.persianOnly(val)}
+            onChange={(name, value) =>
+              setFormData({ ...formData, [name]: value })
+            }
+          />
+          <div className="w-full"></div>
+        </div>
+      ) : null}
+      {formData?.status === 2 ? (
+        <div
+          className={`w-full flex lg:flex-row items-center flex-col gap-5 lg:my-2 lg:items-center`}
+        >
+          <Input
+            name="schools"
+            label={window.t("محل تدریس")}
+            defaultValue={formData}
+            regex={(val) => onInput.persianOnly(val)}
+            onChange={(name, value) =>
+              setFormData({ ...formData, [name]: value })
+            }
+          />
+
+          <Document
+            onChange={(name, value) => {
+              upload({ file: value, target: name });
+              setFormData({ ...formData, [name]: value });
+            }}
+            value={String(uploads["docFileIds"] || formData?.docFileIds)}
+            name="docFileIds"
+          />
+        </div>
+      ) : null}
       <div
         className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`}
       >
@@ -477,7 +538,7 @@ function Profile({
         />
       </div>
       <div
-        className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`}
+        className={`w-full flex lg:flex-row items-center flex-col gap-5 lg:my-2 lg:items-center`}
       >
         <Gender
           options={[window.t("دختر"), window.t("پسر")]}
@@ -488,10 +549,77 @@ function Profile({
           }
           label="جنسیت"
         />
+      </div>
+      <div
+        className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`}
+      >
+        <Input
+          name="username"
+          label={window.t("نام کاربری")}
+          value={formData?.username}
+          onChange={(name, value) =>
+            setFormData({ ...formData, [name]: value })
+          }
+          align="left"
+          regex={(val) => onInput.englishAndNumberWithoutSpace(val)}
+        />
+        <Input
+          name="password"
+          label={window.t("رمز عبور")}
+          onChange={(name, value) =>
+            setFormData({ ...formData, [name]: value })
+          }
+          value={formData?.password}
+          align="left"
+          regex={(val) => onInput.englishAndNumberWithoutSpace(val)}
+        />
+      </div>
+      <div
+        className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`}
+      >
+        <Select
+          options={provinceList}
+          name="provinceId"
+          label={window.t("استان")}
+          selectedOptions={formData?.provinceId}
+          onChange={(name, value) => {
+            setFormData({ ...formData, cityId: null, [name]: value });
+            getCity({
+              provinceId: provinceList.find(
+                (province) => province.name === value
+              )?.id,
+            });
+          }}
+        />
+        <Select
+          options={cityList}
+          name="cityId"
+          label={window.t("شهرستان")}
+          selectedOptions={formData?.cityId}
+          onChange={(name, value) =>
+            setFormData({ ...formData, [name]: value })
+          }
+        />
+      </div>
+      <div
+        className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`}
+      >
+        <Input
+          name="postalCode"
+          label={window.t("کد پستی")}
+          align="left"
+          onChange={(name, value) =>
+            setFormData({ ...formData, [name]: value })
+          }
+          maxLength={10}
+          inputMode="numeric"
+          value={formData?.postalCode}
+          regex={(val) => onInput.numberOnly(val)}
+        />
         <div className="w-full"></div>
       </div>
       <button
-        className="w-full bg-blueC0 py-3 text-tiny text-white rounded-sm"
+        className="w-full bg-blueC0 py-4 text-tiny text-white rounded-sm"
         onClick={() => onSubmit()}
       >
         {window.t("ذخیره")}