esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/community/registrasi_job_seeker.tsx

@@ -0,0 +1,1043 @@
+// withHooks
+import { BigbangTermsArgs } from 'esoftplay/cache/bigbang/terms/import';
+import { CommunityExperienceProperty } from 'esoftplay/cache/community/experience/import';
+import { ComponentAccept } from 'esoftplay/cache/component/accept/import';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentCircle } from 'esoftplay/cache/component/circle/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentLabel_input2 } from 'esoftplay/cache/component/label_input2/import';
+import { ComponentSlidingup } from 'esoftplay/cache/component/slidingup/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDatepicker } from 'esoftplay/cache/lib/datepicker/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibImage } from 'esoftplay/cache/lib/image/import';
+import { LibInput_rectangle2 } from 'esoftplay/cache/lib/input_rectangle2/import';
+import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import { BboConfigProperty } from 'esoftplay/cache/bbo/config/import';
+import { LibInput_rectangle } from 'esoftplay/cache/lib/input_rectangle/import';
+import moment from 'esoftplay/moment';
+import React, { useEffect, useRef } from 'react';
+import { ImageBackground, Keyboard, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface CommunityRegistrasi_job_seekerProps {
+  skill?: string
+  navigation?: any
+  item?: any
+}
+
+export interface CommunityRegistrasi_jobItem extends CommunityRegistrasi_job_seekerProps {
+  onChangeText: (text: string) => void,
+  onDelete: () => void,
+  defaultValue: string,
+  onValid: (s: boolean) => void
+}
+
+function Item(props: CommunityRegistrasi_jobItem) {
+  const inputItem = useRef<LibInput_rectangle2>(null)
+
+  return (
+    <View style={{ flexDirection: 'row', alignContent: "center", alignItems: 'center' }}>
+      <LibInput_rectangle2
+        ref={inputItem}
+        placeholder={esp.lang("community/registrasi_job_seeker", "input_")}
+        autoFocus
+        maxLength={24}
+        defaultValue={props.defaultValue}
+        style={{ marginTop: 8, borderRadius: 4, flex: 8 }}
+        onChangeText={(t) => {
+          props.onChangeText(t)
+        }}
+      />
+      <ComponentTouchable onPress={() => {
+        props.onDelete()
+      }}>
+        <View style={{ marginTop: 10, marginLeft: 10, width: 32, height: 32, borderRadius: 3, backgroundColor: LibStyle.colorRed, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+          <LibIcon name={"close"} size={16} color="#FFF" />
+        </View>
+      </ComponentTouchable>
+    </View>
+  )
+}
+
+export interface CommunityRegistrasi_jobItemView extends CommunityRegistrasi_job_seekerProps {
+  text?: string
+}
+
+
+function ItemView(props: CommunityRegistrasi_jobItemView) {
+  return (
+    <View style={{ marginTop: 8, padding: 10, borderRadius: 4, backgroundColor: "#fff", borderStyle: "solid", borderWidth: 1, borderColor: "#c5c5c5", alignContent: 'center', justifyContent: 'center' }}>
+      <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4B4B4B" }}>{props.text ? props.text : esp.lang("community/registrasi_job_seeker", "input1")}</Text>
+    </View>
+  )
+}
+
+export default function m(props: CommunityRegistrasi_job_seekerProps): any {
+  moment().locale('id')
+  const imgWidth = LibStyle.width
+  const user = UserClass.state().get()
+  // for date display
+  const [bboConfig] = BboConfigProperty.state().useState()
+
+  const [date, setDate] = useSafeState<any>(moment().add(-20, 'years').localeFormat('YYYY-MM-DD'))
+  const [job, setJob] = useSafeState<any>([])
+  const [experience, setExperience] = useSafeState<any>([])
+  const [education, setEducation] = useSafeState<any>([])
+  const [achievement, setAchievement] = useSafeState<any>([])
+  const [communityCat, setCommunityCat] = useSafeState<any>([])
+  const [image, setImage] = useSafeState<string>("")
+  const [imageFor, setImageFor] = useSafeState<string>("")
+  const [imageBanner, setImageBanner] = useSafeState<any>("")
+  const [counterSkill, setCounterSkill] = useSafeState<number>(0)
+  const [valid, setValid] = useSafeState(true)
+  const [showPhone, setShowPhone] = useSafeState(true)
+  const [defaultStatus, setDefaultStatus] = useSafeState<any>()
+  const [aboutMe, setAboutMe] = useSafeState<string>("")
+  const [agree, setAgree] = useSafeState<boolean>(false)
+  const [form, setForm] = useSafeState<any>()
+  const [gender, setGender] = useSafeState<any>()
+  const [loc, setLoc] = useSafeState<any>('')
+
+  const [errorImageProfile, setErrorImageProfile] = useSafeState<boolean>(false)
+  const [errorImageBanner, setErrorImageBanner] = useSafeState<boolean>(false)
+  const scrollToError = useRef<LibScroll>(null)
+
+  const inputWebsite = useRef<LibInput_rectangle2>(null)
+  const inputAboutMe = useRef<LibInput_rectangle2>(null)
+  const inputBirthdayLocation = useRef<LibInput_rectangle2>(null)
+  const inputBirthday = useRef<LibInput_rectangle2>(null)
+  const dialogSetBirthdate = useRef<ComponentSlidingup>(null)
+  const dialogImage = useRef<ComponentSlidingup>(null)
+  const dialogStatus = useRef<ComponentSlidingup>(null)
+  const inputLocation = React.useRef<LibInput_rectangle>(null)
+
+  const [skills, setSkills] = useSafeState<CommunityRegistrasi_job_seekerProps[]>([])
+  const [showSave, setShowSave] = useSafeState<boolean>(true)
+
+  let _status = [
+    {
+      id: 1,
+      title: esp.lang("community/registrasi_job_seeker", "not_work")
+    },
+    {
+      id: 2,
+      title: esp.lang("community/registrasi_job_seeker", "work")
+    },
+    {
+      id: 3,
+      title: esp.lang("community/registrasi_job_seeker", "search_work")
+    },
+  ]
+
+
+  useEffect(() => {
+    BboConfigProperty.curlConfig('v2/config_community')
+
+    // set input with user
+    Keyboard.addListener('keyboardDidShow', (e) => {
+      setShowSave(false)
+    })
+    Keyboard.addListener('keyboardDidHide', (e) => {
+      setShowSave(true)
+    })
+
+    let _defStatus =
+    {
+      id: 1,
+      title: esp.lang("community/registrasi_job_seeker", "not_work1")
+    }
+    setDefaultStatus(_defStatus)
+
+    new LibCurl('community_form', null,
+      (res) => {
+        setForm(res)
+      },
+      () => {
+        // setMsg(msg)
+      }
+    )
+
+  }, [])
+
+  function addJob() {
+    LibNavigation.navigateForResult("community/seeking_job", undefined, 17).then((x) => {
+
+      let _job = [...job]
+      _job.push(x)
+      setJob([..._job])
+
+      let _communityCat = [...communityCat]
+      _communityCat.push({ "community_cat_id": x.job_seeking_role_id, "community_cat_name": x.job_seeking_role_name, "community_cat_par_id": x.job_seeking_specialization_id }, { "community_cat_id": x.job_seeking_specialization_id, "community_cat_name": x.job_seeking_specialization_name })
+      setCommunityCat([..._communityCat])
+    })
+  }
+
+
+  function addExperience() {
+    LibNavigation.navigateForResult("community/experience", undefined, 1).then((x) => {
+      let _experience = [...experience]
+      _experience.push(x)
+      setExperience([..._experience])
+    })
+  }
+
+  function addEducation() {
+    LibNavigation.navigateForResult("community/education", undefined, 1).then((x) => {
+      let _education = [...education]
+      _education.push(x)
+      setEducation([..._education])
+    })
+  }
+
+  function addAchievement() {
+    LibNavigation.navigateForResult("community/achievement").then((x) => {
+      setAchievement([...achievement, x])
+    })
+  }
+
+  function removeJob(index: number) {
+    const _job = [...job]
+    _job.splice(index, 1)
+    setJob([..._job])
+  }
+
+  function removeExperience(index: number) {
+    const _experience = [...experience]
+    _experience.splice(index, 1)
+    setExperience([..._experience])
+  }
+
+  function removeEducation(index: number) {
+    const _education = [...education]
+    _education.splice(index, 1)
+    setEducation([..._education])
+  }
+
+  function removeAchievement(index: number) {
+    const _achievement = [...achievement]
+    _achievement.splice(index, 1)
+    setAchievement([..._achievement])
+  }
+
+  function removeSkill(index: number) {
+    setSkills(LibObject.splice(skills, index, 1)())
+  }
+
+  function next() {
+    let _images = new Array()
+    if (imageBanner == "") {
+      _images.push(image)
+    } else {
+      _images.push(image, imageBanner)
+    }
+
+
+    if (image == "") {
+      LibToastProperty.show(esp.lang("community/registrasi_job_seeker", "empty_profile"), 2000)
+      setErrorImageProfile(true)
+      scrollToError.current?.scrollToIndex(0)
+      return null
+    }
+
+    if (imageBanner == "") {
+      LibToastProperty.show(esp.lang("community/registrasi_job_seeker", "empty_banner"), 2000)
+      setErrorImageBanner(true)
+      scrollToError.current?.scrollToIndex(0)
+      return null
+    }
+
+    if (inputBirthdayLocation.current?.getText() == "") {
+      inputBirthdayLocation.current?.setError(esp.lang("community/registrasi_job_seeker", "empty_city"))
+      inputBirthdayLocation.current?.focus()
+      return
+    }
+
+    if (inputBirthday.current?.getText() == "") {
+      inputBirthday.current?.setError(esp.lang("community/registrasi_job_seeker", "empty_date"))
+      inputBirthday.current?.focus()
+      Keyboard.dismiss()
+      return
+    }
+
+    if (inputLocation.current?.getText() == "") {
+      inputLocation.current?.setError("Silahkan tambahkan lokasi pekerjaan yang diinginkan")
+      inputLocation.current?.focus()
+      return
+    }
+
+    if (job.length == 0) {
+      LibToastProperty.show(esp.lang("community/registrasi_job_seeker", "empty_criteria"))
+      return
+    }
+
+    if (education.length == 0) {
+      LibToastProperty.show(esp.lang("community/registrasi_job_seeker", "empty_edu"))
+      return
+    }
+
+    let post = {
+      cat_id: props.item.id,
+      images: JSON.stringify(_images),
+      phone: user?.phone,
+      email: user.email,
+      website: inputWebsite.current?.getText(),
+      birthday_location: inputBirthdayLocation.current?.getText(),
+      birthday_date: date,
+      location_id: loc?.id,
+      gender: gender.id,
+      biography: inputAboutMe.current?.getText(),
+      params_show_phone: showPhone == true ? 1 : 0,
+      education: JSON.stringify(education),
+      job_experience: JSON.stringify(experience),
+      achievement: JSON.stringify(achievement),
+      job_seeking: JSON.stringify(job),
+      skill: JSON.stringify(skills),
+      status_job: defaultStatus.id,
+      community_cat: JSON.stringify(communityCat)
+    }
+
+    LibDialog.confirm(esp.lang("community/registrasi_job_seeker", "register_title"), esp.lang("community/registrasi_job_seeker", "register_msg"), esp.lang("community/registrasi_job_seeker", "register_confirm"), () => {
+      LibProgress.show(esp.lang("community/registrasi_job_seeker", "register_wait"))
+      new LibCurl('community_register', post, (result, msg) => {
+        LibProgress.hide()
+        LibDialog.info(esp.lang("community/registrasi_job_seeker", "register_success"), result);
+        LibNavigation.backToRoot()
+        LibNavigation.navigate('user/profile')
+        LibNavigation.redirect(81215)
+        // if (esp.isDebug()) {
+        //   LibNavigation.navigate('user/profile1')
+        // } else {
+        // LibNavigation.navigate('community/index', { url: 'community_category' })
+        // }
+      }, (error) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("community/registrasi_job_seeker", "register_failed"), error?.message)
+      }, 1)
+    }, esp.lang("community/registrasi_job_seeker", "register_cancel"), () => {
+
+    })
+
+  }
+
+  function checkDuplicat(arr: any) {
+    return new Set(arr).size !== arr.length
+  }
+
+  function isValid() {
+    if (skills.some((t: any) => t == '')) {
+      LibToastProperty.show(esp.lang("community/registrasi_job_seeker", "toast_empty_skill"))
+      return false
+    } else if (checkDuplicat(skills)) {
+      LibToastProperty.show(esp.lang("community/registrasi_job_seeker", "toast_skill_not_same"))
+      return false
+    } else {
+      return true
+    }
+  }
+
+
+  function upAndDownArray(arr: any, old_index: number, new_index: number) {
+    if (new_index >= arr.length) {
+      var k = new_index - arr.length + 1;
+      while (k--) {
+        arr.push(undefined);
+      }
+    }
+    arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
+    return arr
+  }
+
+  function openLocation(): void {
+    LibNavigation.navigateForResult('user/location', undefined).then((location) => {
+      inputLocation.current?.setText(location.detail)
+      setLoc(location);
+    })
+  }
+
+
+  function renderGender(item: any, i: number) {
+    return (
+      <ComponentTouchable key={i} onPress={() => { setGender(item) }}>
+        <View style={{ flexDirection: 'row', height: 35, alignContent: 'center', alignItems: 'center', marginRight: 30 }}>
+          <View style={{ height: 20, width: 20, borderRadius: 10, borderColor: '#8e8e8e', borderWidth: 1, justifyContent: 'center', alignItems: 'center' }} >
+            {item.id === (gender && gender.id) && <View style={{ height: 15, width: 15, borderRadius: 7.5, backgroundColor: '#51B596' }} />}
+          </View>
+          <Text allowFontScaling={false} style={{ marginLeft: 15 }}>{item.name}</Text>
+        </View>
+      </ComponentTouchable>
+    )
+  }
+
+  function renderJob(item: any, i: number) {
+    return (
+      <View key={i} style={{ borderWidth: 1, borderColor: "#c5c5c5", borderRadius: 5, paddingHorizontal: 15, paddingBottom: 15, marginTop: 20 }} >
+        <TouchableOpacity hitSlop={{ top: 5, bottom: 5, left: 5, right: 5 }} onPress={() => { removeJob(i) }} style={{ position: "absolute", top: -15, right: -10 }} >
+          <View style={{ backgroundColor: '#e44545', width: 30, height: 30, borderRadius: 15, alignItems: "center", justifyContent: 'center' }} >
+            <LibIcon name="delete-outline" color="white" />
+          </View>
+        </TouchableOpacity>
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "label_specialsm")} />
+        <ItemView text={item.job_seeking_specialization_name} />
+        {
+          item.job_seeking_specialization_name == "Others" &&
+          <ItemView text={item.job_seeking_specialization_member_name} />
+        }
+
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "label_role")} />
+        <ItemView text={item.job_seeking_role_name !== null ? item.job_seeking_role_name : "Others"} />
+        {
+          item.job_seeking_role_name == "Others" && item.job_seeking_role_id != 0 && // karena id 0 itu kalo spesialisasinya other
+          <ItemView text={item.job_seeking_role_member_name} />
+        }
+
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "label_industy")} />
+        <ItemView text={item.job_seeking_industry_name} />
+        {
+          item.job_seeking_industry_name == "Others" &&
+          <ItemView text={item.job_seeking_industry_member_name} />
+        }
+
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "label_position")} />
+        <ItemView text={item.job_seeking_position_name} />
+
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "label_sallary")} />
+        <ItemView text={LibUtils.money(item.job_seeking_salary, "")} />
+        <View style={{ marginTop: 15, paddingTop: 10, borderTopWidth: 1, borderTopColor: '#f0f0f0', paddingHorizontal: 15, height: 50, backgroundColor: '#fff', borderBottomRightRadius: 5, borderBottomLeftRadius: 5, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+
+          <View style={{ backgroundColor: '#45c9af', width: 30, height: 30, borderRadius: 15, alignItems: "center", justifyContent: 'center' }} >
+            <Text style={{ fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#FFF" }} >{i + 1}</Text>
+          </View>
+
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+            <TouchableOpacity
+              style={{ marginLeft: 20, marginRight: 20 }}
+              onPress={() => {
+                if (i != 0) {
+                  let newArr = upAndDownArray(job, i, i - 1)
+                  setJob(newArr);
+                  setCounterSkill(counterSkill + 1)
+                } else {
+                  LibToastProperty.show(esp.lang("community/registrasi_job_seeker", "on_top"))
+                }
+              }} >
+              <View style={{ alignContent: 'center', alignItems: 'center' }}>
+                <LibIcon name="arrow-up-bold-box" size={30} color={i == 0 ? "#f0f0f0" : "#000"} />
+                <Text style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" }} >{esp.lang("community/registrasi_job_seeker", "go_top")}</Text>
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity onPress={() => {
+              if ((i + 1) != job.length) {
+                let newArr = upAndDownArray(job, i, i + 1)
+                setJob(newArr);
+                setCounterSkill(counterSkill + 1)
+              } else {
+                LibToastProperty.show(esp.lang("community/registrasi_job_seeker", "on_bot"))
+              }
+            }}>
+              <View style={{ alignContent: 'center', alignItems: 'center' }}>
+                <LibIcon name="arrow-down-bold-box" size={30} color={(i + 1) == job.length ? "#f0f0f0" : "#000"} />
+                <Text style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" }} >{esp.lang("community/registrasi_job_seeker", "go_bottom")}</Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    )
+  }
+
+  function renderExperience(item: any, i: number) {
+    return (
+      <View key={i} style={{ borderWidth: 1, borderColor: "#c5c5c5", borderRadius: 5, paddingHorizontal: 15, paddingBottom: 15, marginTop: 20 }} >
+        <TouchableOpacity hitSlop={{ top: 5, bottom: 5, left: 5, right: 5 }} onPress={() => { removeExperience(i) }} style={{ position: "absolute", top: -15, right: -10 }} >
+          <View style={{ backgroundColor: '#e44545', width: 30, height: 30, borderRadius: 15, alignItems: "center", justifyContent: 'center' }} >
+            <LibIcon name="delete-outline" color="white" />
+          </View>
+        </TouchableOpacity>
+
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "label_postition")} />
+        <ItemView text={item.job_experience_position} />
+
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "label_name")} />
+        <ItemView text={item.job_experience} />
+
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "label_exp")} />
+        <View style={{ flexDirection: 'row', justifyContent: 'center', alignContent: 'center', alignItems: 'center' }} >
+          <View style={{ flex: 1 }} >
+            <ItemView text={CommunityExperienceProperty.setNameMonth(item.job_experience_start_month)} />
+            <ItemView text={item.job_experience_start_year} />
+          </View>
+          <View style={{ margin: 15 }} >
+            <Text style={{ fontFamily: "SFProText", fontSize: 20, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }} >-</Text>
+          </View>
+          <View style={{ flex: 1 }} >
+            <ItemView text={CommunityExperienceProperty.setNameMonth(item.job_experience_end_month)} />
+            <ItemView text={item.job_experience_end_year == '0000' ? esp.lang("community/registrasi_job_seeker", "till_now") : item.job_experience_end_year} />
+          </View>
+        </View>
+
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "label_location")} />
+        <ItemView text={item.job_experience_location_name} />
+
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "label_jobdesc")} />
+        <ItemView text={item.job_experience_description} />
+
+
+        <View style={{ marginTop: 15, paddingTop: 10, borderTopWidth: 1, borderTopColor: '#f0f0f0', paddingHorizontal: 15, height: 50, backgroundColor: '#fff', borderBottomRightRadius: 5, borderBottomLeftRadius: 5, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+
+          <View style={{ backgroundColor: '#45c9af', width: 30, height: 30, borderRadius: 15, alignItems: "center", justifyContent: 'center' }} >
+            <Text style={{ fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#FFF" }} >{i + 1}</Text>
+          </View>
+
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+            <TouchableOpacity
+              style={{ marginLeft: 20, marginRight: 20 }}
+              onPress={() => {
+                if (i != 0) {
+                  let newArr = upAndDownArray(experience, i, i - 1)
+                  setExperience(newArr)
+                  setCounterSkill(counterSkill + 1)
+                } else {
+                  LibToastProperty.show(esp.lang("community/registrasi_job_seeker", "on_top1"))
+                }
+              }} >
+              <View style={{ alignContent: 'center', alignItems: 'center' }}>
+                <LibIcon name="arrow-up-bold-box" size={30} color={i == 0 ? "#f0f0f0" : "#000"} />
+                <Text style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" }} >{esp.lang("community/registrasi_job_seeker", "go_top1")}</Text>
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity onPress={() => {
+              if ((i + 1) != experience.length) {
+                let newArr = upAndDownArray(experience, i, i + 1)
+                setExperience(newArr)
+                setCounterSkill(counterSkill + 1)
+              } else {
+                LibToastProperty.show(esp.lang("community/registrasi_job_seeker", "on_bottom"))
+              }
+            }}>
+              <View style={{ alignContent: 'center', alignItems: 'center' }}>
+                <LibIcon name="arrow-down-bold-box" size={30} color={(i + 1) == experience.length ? "#f0f0f0" : "#000"} />
+                <Text style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" }} >{esp.lang("community/registrasi_job_seeker", "go_down")}</Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    )
+  }
+
+  function renderEducation(item: any, i: number) {
+    return (
+      <View key={i} style={{ borderWidth: 1, borderColor: "#c5c5c5", borderRadius: 5, paddingHorizontal: 15, paddingBottom: 15, marginTop: 20 }} >
+        <TouchableOpacity hitSlop={{ top: 5, bottom: 5, left: 5, right: 5 }} onPress={() => { removeEducation(i) }} style={{ position: "absolute", top: -15, right: -10 }} >
+          <View style={{ backgroundColor: '#e44545', width: 30, height: 30, borderRadius: 15, alignItems: "center", justifyContent: 'center' }} >
+            <LibIcon name="delete-outline" color="white" />
+          </View>
+        </TouchableOpacity>
+
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "edu_tupe")} mandatory />
+        <ItemView text={item.education_type_title} />
+
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "major")} mandatory />
+        <ItemView text={item.education_majors} />
+
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "edu_name")} mandatory />
+        <ItemView text={item.education} />
+
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "edu_exp")} mandatory />
+        <View style={{ flexDirection: 'row', justifyContent: 'center', alignContent: 'center', alignItems: 'center' }} >
+          <View style={{ flex: 1 }}>
+            <ItemView text={CommunityExperienceProperty.setNameMonth(item.education_start_month)} />
+            <ItemView text={item.education_start_year} />
+          </View>
+
+          <View style={{ margin: 15 }} >
+            <Text style={{ fontFamily: "SFProText", fontSize: 20, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }} >-</Text>
+          </View>
+
+          <View style={{ flex: 1 }}>
+            <ItemView text={CommunityExperienceProperty.setNameMonth(item.education_end_month)} />
+            <ItemView text={item.education_end_year == '0000' ? "Sampai Sekarang" : item.education_end_year} />
+          </View>
+
+        </View>
+
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "edu_location")} mandatory />
+        <ItemView text={item.education_location_name} />
+
+        <View style={{ marginTop: 15, paddingTop: 10, borderTopWidth: 1, borderTopColor: '#f0f0f0', paddingHorizontal: 15, height: 50, backgroundColor: '#fff', borderBottomRightRadius: 5, borderBottomLeftRadius: 5, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+
+          <View style={{ backgroundColor: '#45c9af', width: 30, height: 30, borderRadius: 15, alignItems: "center", justifyContent: 'center' }} >
+            <Text style={{ fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#FFF" }} >{i + 1}</Text>
+          </View>
+
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+            <TouchableOpacity
+              style={{ marginLeft: 20, marginRight: 20 }}
+              onPress={() => {
+                if (i != 0) {
+                  let newArr = upAndDownArray(education, i, i - 1)
+                  setEducation(newArr)
+                  setCounterSkill(counterSkill + 1)
+                } else {
+                  LibToastProperty.show(esp.lang("community/registrasi_job_seeker", "edu_on_top"))
+                }
+              }} >
+              <View style={{ alignContent: 'center', alignItems: 'center' }}>
+                <LibIcon name="arrow-up-bold-box" size={30} color={i == 0 ? "#f0f0f0" : "#000"} />
+                <Text style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" }} >{esp.lang("community/registrasi_job_seeker", "edu_go_Top")}</Text>
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity onPress={() => {
+              if ((i + 1) != education.length) {
+                let newArr = upAndDownArray(education, i, i + 1)
+                setEducation(newArr)
+                setCounterSkill(counterSkill + 1)
+              } else {
+                LibToastProperty.show(esp.lang("community/registrasi_job_seeker", "edu_on_bottom"))
+              }
+            }}>
+              <View style={{ alignContent: 'center', alignItems: 'center' }}>
+                <LibIcon name="arrow-down-bold-box" size={30} color={(i + 1) == education.length ? "#f0f0f0" : "#000"} />
+                <Text style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" }} >{esp.lang("community/registrasi_job_seeker", "edu_go_down")}</Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+      </View>
+    )
+  }
+
+  function renderAchievement(item: any, i: number) {
+    return (
+      <View key={i} style={{ borderWidth: 1, borderColor: "#c5c5c5", borderRadius: 5, paddingHorizontal: 15, paddingBottom: 15, marginTop: 20 }} >
+        <TouchableOpacity hitSlop={{ top: 5, bottom: 5, left: 5, right: 5 }} onPress={() => { removeAchievement(i) }} style={{ position: "absolute", top: -15, right: -10 }} >
+          <View style={{ backgroundColor: '#e44545', width: 30, height: 30, borderRadius: 15, alignItems: "center", justifyContent: 'center' }} >
+            <LibIcon name="delete-outline" color="white" />
+          </View>
+        </TouchableOpacity>
+
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "label_title")} />
+        <ItemView text={item.achievement_title} />
+
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "label_instance")} />
+        <ItemView text={item.achievement} />
+
+        <View style={{ flexDirection: 'row' }} >
+          <View style={{ flex: 1 }} >
+            <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "month_get")} />
+            <ItemView text={CommunityExperienceProperty.setNameMonth(item.achievement_start_month)} />
+          </View>
+          <View style={{ margin: 15 }} >
+            <Text style={{ fontFamily: "SFProText", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }} ></Text>
+          </View>
+          <View style={{ flex: 1 }} >
+            <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "year_get")} />
+            <ItemView text={item.achievement_start_year} />
+          </View>
+        </View>
+
+        <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "show_doc")} />
+        {
+          item.achievement_image != '' &&
+          <ComponentTouchable onPress={() => { item.achievement_image != '' && LibNavigation.navigate('lib/gallery', { image: item.achievement_image }) }}>
+            <View style={{ borderTopRightRadius: 4, borderBottomRightRadius: 4, marginTop: 8, width: LibStyle.width * 0.5, height: 35, borderWidth: 1, borderColor: '#45C9AF', backgroundColor: "#ECFEF8", alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: '#45C9AF' }}>{esp.lang("community/registrasi_job_seeker", "show_doc1")}</Text>
+            </View>
+          </ComponentTouchable>
+        }
+
+        <View style={{ marginTop: 15, paddingTop: 10, borderTopWidth: 1, borderTopColor: '#f0f0f0', paddingHorizontal: 15, height: 50, backgroundColor: '#fff', borderBottomRightRadius: 5, borderBottomLeftRadius: 5, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+
+          <View style={{ backgroundColor: '#45c9af', width: 30, height: 30, borderRadius: 15, alignItems: "center", justifyContent: 'center' }} >
+            <Text style={{ fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#FFF" }} >{i + 1}</Text>
+          </View>
+
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+            <TouchableOpacity
+              style={{ marginLeft: 20, marginRight: 20 }}
+              onPress={() => {
+                if (i != 0) {
+                  let newArr = upAndDownArray(achievement, i, i - 1)
+                  setAchievement(newArr)
+                  setCounterSkill(counterSkill + 1)
+                } else {
+                  LibToastProperty.show(esp.lang("community/registrasi_job_seeker", "ach_on_top"))
+                }
+              }} >
+              <View style={{ alignContent: 'center', alignItems: 'center' }}>
+                <LibIcon name="arrow-up-bold-box" size={30} color={i == 0 ? "#f0f0f0" : "#000"} />
+                <Text style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" }} >{esp.lang("community/registrasi_job_seeker", "ach_go_top")}</Text>
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity onPress={() => {
+              if ((i + 1) != achievement.length) {
+                let newArr = upAndDownArray(achievement, i, i + 1)
+                setAchievement(newArr)
+                setCounterSkill(counterSkill + 1)
+              } else {
+                LibToastProperty.show(esp.lang("community/registrasi_job_seeker", "ach_on_bott"))
+              }
+            }}>
+              <View style={{ alignContent: 'center', alignItems: 'center' }}>
+                <LibIcon name="arrow-down-bold-box" size={30} color={(i + 1) == achievement.length ? "#f0f0f0" : "#000"} />
+                <Text style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" }} >{esp.lang("community/registrasi_job_seeker", "ach_go_down")}</Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    )
+  }
+
+  function renderSkills(item: any, i: number) {
+    return (
+      <Item
+        key={i}
+        onValid={setValid}
+        defaultValue={item}
+        onChangeText={(x) => setSkills(LibObject.set(skills, x)(i))}
+        onDelete={() => {
+          removeSkill(i)
+          setCounterSkill(counterSkill + 1)
+        }}
+      />
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader title={esp.lang("community/registrasi_job_seeker", "header_title")} notif />
+      <LibKeyboard_avoid style={{ flex: 1, height: "100%" }}>
+        <LibScroll keyboardShouldPersistTaps="always" ref={scrollToError}>
+          <ImageBackground source={{ uri: imageBanner == "" ? bboConfig?.community?.job_seeker?.cover : imageBanner }} style={{ borderColor: errorImageBanner ? LibStyle.colorRed : '#fff', borderWidth: errorImageBanner ? 2 : 1, width: imgWidth, paddingBottom: 20, alignItems: 'center' }} >
+            <View style={{ marginVertical: 15 }} >
+              {
+                image !== "" ?
+                  <LibPicture source={{ uri: image }} style={{ marginTop: 10, width: 120, height: 120, borderRadius: 60, }} />
+                  :
+                  <View style={{ marginTop: 10, width: 120, height: 120, borderRadius: 60, backgroundColor: LibStyle.colorGrey, borderWidth: errorImageBanner ? 2 : 1, borderColor: errorImageProfile ? LibStyle.colorRed : '#fff' }} />
+              }
+              <View style={{ alignSelf: 'center', alignItems: 'center', justifyContent: 'center', position: "absolute", top: 20, left: 0, right: 0, bottom: 0 }} >
+                <TouchableOpacity onPress={() => {
+                  dialogImage.current?.show()
+                  setImageFor("profile")
+                  // LibNavigation.navigate('user/profile_edit', { from: 'community_profile' })
+                }} style={{ backgroundColor: '#c5c5c5', padding: 6, borderRadius: 4, borderWidth: errorImageProfile ? 2 : 1, borderColor: errorImageProfile ? LibStyle.colorRed : '#fff' }} >
+                  <LibIcon name="camera-outline" color="white" />
+                </TouchableOpacity>
+                <Text style={{ paddingVertical: 4, fontFamily: "SFProText", fontSize: 14, fontWeight: "normal", letterSpacing: 0, color: "#c5c5c5" }} >{esp.lang("community/registrasi_job_seeker", "profile")}</Text>
+              </View>
+            </View>
+
+
+            <View style={{ position: "absolute", right: 12, top: 12, flexDirection: 'row' }}>
+              <View style={{ padding: 5, backgroundColor: 'rgba(0,0,0,0.4)', borderRadius: 4, marginRight: 5 }}>
+                <Text allowFontScaling={false} style={{ paddingVertical: 4, textAlign: 'center', textAlignVertical: 'center', fontFamily: "SFProText", fontSize: 14, fontWeight: "normal", letterSpacing: 0, color: "#fff" }} >{esp.lang("community/job_seeker", "cover")}</Text>
+              </View>
+              <TouchableOpacity onPress={() => {
+                dialogImage.current?.show()
+                setImageFor("banner")
+              }} style={{ borderColor: errorImageBanner ? LibStyle.colorRed : '#c5c5c5', borderWidth: errorImageBanner ? 3 : 2, backgroundColor: '#c5c5c5', padding: 6, borderRadius: 4 }} >
+                <LibIcon name="camera-outline" color="white" />
+              </TouchableOpacity>
+            </View>
+
+            <Text style={{ fontFamily: "SFProText", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: imageBanner.length == 0 ? "#000" : '#fff' }} >{user && (user?.name)}</Text>
+            <Text style={{ paddingVertical: 4, fontFamily: "SFProText", fontSize: 14, fontWeight: "normal", letterSpacing: 0, color: imageBanner.length == 0 ? "#000" : '#fff' }} >{user && user.email} || {user && user?.phone} </Text>
+            {/* <Text style={{ fontFamily: "SFProText", fontSize: 14, fontWeight: "normal", letterSpacing: 0, color: imageBanner.length == 0 ? "#000" : '#fff' }} >{user && user.location_name}</Text> */}
+          </ImageBackground>
+
+          <View style={{ backgroundColor: "#f6f6f6" }} >
+            {/* personal info */}
+            <View style={{ paddingHorizontal: 16, backgroundColor: 'white', paddingBottom: 16 }} >
+              <Text style={{ marginTop: 24, marginBottom: 8, fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }} >{esp.lang("community/registrasi_job_seeker", "info")}</Text>
+              <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "phone")} />
+              <View>
+                <LibInput_rectangle2
+                  returnKeyType="next"
+                  editable={false}
+                  autoCapitalize="none"
+                  defaultValue={user?.phone}
+                  placeholder={esp.lang("community/registrasi_job_seeker", "placeholder_phone")}
+                  style={{ marginTop: 8, borderRadius: 4, backgroundColor: '#f1f1f1' }}
+                />
+                <TouchableOpacity onPress={() => {
+                  setShowPhone(showPhone == true ? false : true)
+                }} style={{ marginTop: 7, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                  <View style={{ alignContent: 'center', alignItems: 'center', height: 20, width: 20, borderRadius: 4, borderWidth: 1, backgroundColor: showPhone ? "#ECFEF8" : "#fff", borderColor: showPhone ? "#45C9AF" : "#C4C4C4" }}>
+                    {
+                      showPhone &&
+                      <LibIcon name="check" color="#45C9AF" size={17} />
+                    }
+                  </View>
+                  <Text allowFontScaling={false} style={{ marginLeft: 12, fontFamily: "SFProText", fontStyle: "normal", fontWeight: "normal", fontSize: 12, lineHeight: 14 }}>{esp.lang("community/registrasi_job_seeker", "show_phone")}</Text>
+                </TouchableOpacity>
+              </View>
+
+              <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "label_web")} />
+              <LibInput_rectangle2
+                ref={inputWebsite}
+                returnKeyType="next"
+                autoCapitalize="none"
+                placeholder={esp.lang("community/registrasi_job_seeker", "placeholder_web")} close
+                style={{ marginTop: 8, borderRadius: 4 }}
+              />
+
+              <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "label_place")} mandatory />
+              <LibInput_rectangle2
+                ref={inputBirthdayLocation}
+                returnKeyType="next"
+                placeholder={esp.lang("community/registrasi_job_seeker", "placeholder_place")} close
+                style={{ marginTop: 8, borderRadius: 4 }}
+              />
+
+              <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "label_ate")} mandatory />
+              <ComponentTouchable onPress={() => { dialogSetBirthdate.current?.show() }} >
+                <LibInput_rectangle2
+                  ref={inputBirthday}
+                  placeholder={esp.lang("community/registrasi_job_seeker", "placeholer_date")}
+                  editable={false}
+                  dropdown
+                  style={{ marginTop: 8, borderRadius: 4 }}
+                />
+              </ComponentTouchable>
+
+              <ComponentLabel_input2 label={esp.lang("community/registrasi_job_seeker", "label_gender")} mandatory />
+              <View style={{ marginTop: 8, marginRight: 13, flexDirection: 'row' }}>
+                {
+                  form && form.gender && form.gender.length > 0 && form.gender.map(renderGender)
+                }
+              </View>
+
+              <ComponentLabel_input2 label={"Domisili"} mandatory />
+              <ComponentTouchable onPress={() => { openLocation() }} >
+                <LibInput_rectangle2
+                  ref={inputLocation}
+                  placeholder={"Tambah Domisili"}
+                  editable={false}
+                  dropdown
+                  style={{ marginTop: 8, borderRadius: 4 }}
+                  defaultValue={loc && loc.detail}
+                />
+              </ComponentTouchable>
+
+            </View>
+
+            {/* About me */}
+            <View style={{ marginTop: 4, paddingHorizontal: 16, paddingBottom: 16, backgroundColor: 'white' }} >
+              <Text style={{ marginTop: 24, marginBottom: 8, fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }} >{esp.lang("community/registrasi_job_seeker", "about")}</Text>
+              <View>
+                <LibInput_rectangle2
+                  ref={inputAboutMe}
+                  placeholder={esp.lang("community/registrasi_job_seeker", "placeholder_about")}
+                  multiline
+                  maxLength={300}
+                  onChangeText={(t) => {
+                    LibUtils.debounce(() => {
+                      setAboutMe(t)
+                    }, 100)
+                  }}
+                  inputStyle={{ textAlignVertical: 'top', paddingTop: 10, paddingBottom: 10, height: 150 }}
+                  style={{ borderRadius: 4, borderColor: '#c4c4c4', marginBottom: 10, marginTop: 8, height: 150, justifyContent: 'flex-start' }}
+                />
+                <Text style={{ marginTop: 8, fontFamily: "SFProText", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: aboutMe.length == 300 ? "#e44545" : "#c5c5c5", textAlign: 'right' }} >{esp.lang("community/registrasi_job_seeker", "max", String(aboutMe.length))}</Text>
+              </View>
+            </View>
+
+            {/* Seeking Job */}
+            <View style={{ marginTop: 4, paddingHorizontal: 16, paddingBottom: 16, backgroundColor: 'white' }} >
+              <View style={{ flexDirection: 'row', marginTop: 24 }} >
+                <Text style={{ fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }} >{esp.lang("community/registrasi_job_seeker", "seeking_job")}</Text>
+                <Text style={{ fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#ed6536" }} >*</Text>
+              </View>
+
+              {
+                LibUtils.checkUndefined(job, "0") && job.map(renderJob)
+              }
+
+              <ComponentButton label={esp.lang("community/registrasi_job_seeker", "seeking")} backgroundColor="white" borderColor="#45c9af" fontColor="#45c9af" onPress={addJob} style={{ height: 48, borderRadius: 24, marginTop: 20, marginBottom: 15 }} />
+            </View>
+
+            {/* status */}
+            <View style={{ marginTop: 4, paddingHorizontal: 16, paddingBottom: 16, backgroundColor: 'white' }} >
+              <View style={{ flexDirection: 'row', marginTop: 24 }} >
+                <Text style={{ fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }} >{esp.lang("community/registrasi_job_seeker", "status")}</Text>
+                <Text style={{ fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#ed6536" }} >*</Text>
+              </View>
+
+              <TouchableOpacity
+                onPress={() => {
+                  Keyboard.dismiss()
+                  dialogStatus.current?.show()
+                }}
+              >
+                <LibInput_rectangle2
+                  placeholder={esp.lang("community/registrasi_job_seeker", "placeholder_status")}
+                  defaultValue={defaultStatus?.title}
+                  value={defaultStatus?.title}
+                  dropdown
+                  style={{ borderColor: defaultStatus?.id == 1 ? '#04b995' : defaultStatus?.id == 2 ? '#3498db' : 'red', borderRadius: 4, }}
+                  inputStyle={{ color: defaultStatus?.id == 1 ? '#04b995' : defaultStatus?.id == 2 ? '#3498db' : 'red' }}
+                  editable={false}
+                  onPress={() => { dialogStatus.current?.show() }}
+                />
+              </TouchableOpacity>
+
+            </View>
+
+            {/* work Experience */}
+            <View style={{ marginTop: 4, paddingHorizontal: 16, paddingBottom: 16, backgroundColor: 'white' }} >
+              <Text style={{ marginTop: 24, marginBottom: 8, fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }} >{esp.lang("community/registrasi_job_seeker", "exp")}</Text>
+              {
+                LibUtils.checkUndefined(experience, "0") && experience.map(renderExperience)
+              }
+
+              <ComponentButton label={esp.lang("community/registrasi_job_seeker", "add_xp")} backgroundColor="white" borderColor="#45c9af" fontColor="#45c9af" onPress={addExperience} style={{ height: 48, borderRadius: 24, marginTop: 20, marginBottom: 15 }} />
+            </View>
+
+            {/* Education */}
+            <View style={{ marginTop: 4, paddingHorizontal: 16, paddingBottom: 16, backgroundColor: 'white' }} >
+              <View style={{ flexDirection: 'row', marginTop: 24, marginBottom: 8 }} >
+                <Text style={{ fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }} >{esp.lang("community/registrasi_job_seeker", "education")}</Text>
+                <Text style={{ fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#ed6536" }} >*</Text>
+              </View>
+              {
+                LibUtils.checkUndefined(education, "0") && education.map(renderEducation)
+              }
+
+              <ComponentButton label={esp.lang("community/registrasi_job_seeker", "add_edu")} backgroundColor="white" borderColor="#45c9af" fontColor="#45c9af" onPress={addEducation} style={{ height: 48, borderRadius: 24, marginTop: 20, marginBottom: 15 }} />
+
+            </View>
+
+            {/* Achievement */}
+            <View style={{ marginTop: 4, paddingHorizontal: 16, paddingBottom: 16, backgroundColor: 'white' }} >
+              <Text style={{ marginTop: 24, marginBottom: 8, fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }} >{esp.lang("community/registrasi_job_seeker", "achiev")}</Text>
+              {
+                LibUtils.checkUndefined(achievement, "0") && achievement.map(renderAchievement)
+              }
+              <ComponentButton label={esp.lang("community/registrasi_job_seeker", "add_achie")} backgroundColor="white" borderColor="#45c9af" fontColor="#45c9af" onPress={addAchievement} style={{ height: 48, borderRadius: 24, marginTop: 20, marginBottom: 15 }} />
+
+            </View>
+
+            {/* skills */}
+            <View key={counterSkill} style={{ marginTop: 4, paddingHorizontal: 16, paddingBottom: 16, backgroundColor: 'white' }} >
+              <Text style={{ marginTop: 24, marginBottom: 8, fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }} >{esp.lang("community/registrasi_job_seeker", "skill")}</Text>
+              {
+                skills.map(renderSkills)
+              }
+              <ComponentTouchable onPress={() => {
+                (isValid() && valid) &&
+                  setSkills(LibObject.push(skills, "")())
+              }} style={{ height: 32, borderRadius: 4, marginTop: 12, backgroundColor: "#ffffff", borderWidth: 1, borderColor: "#45c9af", flexDirection: 'row', alignItems: 'center' }} >
+                <Text style={{ paddingLeft: 8, fontFamily: "SFProText", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#45c9af" }} >{esp.lang("community/registrasi_job_seeker", "add_skill")}</Text>
+              </ComponentTouchable>
+
+            </View>
+
+          </View>
+
+          <ComponentAccept
+            agree={agree}
+            onPressAgree={() => { setAgree(agree == true ? false : true) }}
+            onPressPrivacy={() => {
+              LibNavigation.navigate<BigbangTermsArgs>('bigbang/terms', { cat: 'community', type: 'privacy' })
+            }}
+            onPressTerm={() => {
+              LibNavigation.navigate<BigbangTermsArgs>('bigbang/terms', { cat: 'community', type: 'term' })
+            }}
+          />
+
+        </LibScroll>
+        {
+          showSave &&
+          <ComponentButton label={esp.lang("community/registrasi_job_seeker", "btn_reg")} backgroundColor={agree ? "#45c9af" : LibStyle.colorTextPrimary} onPress={() => {
+            (isValid() && valid) ?
+              agree ? next() : LibToastProperty.show(esp.lang("community/registrasi_job_seeker", "agree"))
+              :
+              LibToastProperty.show(esp.lang("community/registrasi_job_seeker", "skill_empty"))
+          }} style={{ height: 48, borderRadius: 24, marginTop: 20, marginBottom: 15, marginHorizontal: 16 }} />
+        }
+
+        <ComponentSlidingup ref={dialogSetBirthdate}>
+          <View style={{ backgroundColor: 'white', paddingBottom: 25, height: 230 }}>
+            <LibDatepicker
+              minDate={moment().add(-90, 'years').localeFormat('YYYY-MM-DD')}
+              maxDate={moment().localeFormat('YYYY-MM-DD')}
+              onDateChange={(date: any) => {
+                inputBirthday.current?.setText(moment(date).localeFormat('DD MMMM YYYY'))
+                dialogSetBirthdate.current?.hide()
+                setDate(date)
+              }}
+              selectedDate={date}
+            />
+          </View>
+        </ComponentSlidingup>
+
+        {/* dialog image profile */}
+        <ComponentSlidingup ref={dialogImage}>
+          <View style={{ backgroundColor: 'white', borderTopRightRadius: 20, borderTopLeftRadius: 20, paddingBottom: 35, paddingHorizontal: 19, }}>
+            <Text allowFontScaling={false} style={{ marginTop: 26, marginBottom: 23, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: "#34495e" }}>{esp.lang("community/registrasi_job_seeker", "change_pic", imageFor == "profile" ? esp.lang("community/registrasi_job_seeker", "profile_title") : esp.lang("community/registrasi_job_seeker", "banner_title"))}</Text>
+            <View style={{ flexDirection: 'row', justifyContent: 'space-around', marginBottom: 27 }}>
+              <ComponentCircle image={'icons/ic_camera.png'} color="#f39c12" title={esp.lang("community/registrasi_job_seeker", "camera")} onPress={() =>
+                LibImage.fromCamera({ crop: { ratio: imageFor == "profile" ? "1:1" : "36:23", forceCrop: true, message: '' } }).then((url) => {
+                  dialogImage.current?.hide()
+                  if (imageFor == "profile") {
+                    setImage(url)
+                  } else {
+                    setImageBanner(url)
+                  }
+                  setErrorImageProfile(false)
+                  setErrorImageBanner(false)
+                })} />
+              <ComponentCircle image={'icons/ic_galery.png'} color="#3498db" title={esp.lang("community/registrasi_job_seeker", "gallery")} onPress={() =>
+                LibImage.fromGallery({ crop: { ratio: imageFor == "profile" ? "1:1" : "36:23", forceCrop: true, message: '' } }).then((url: any) => {
+                  dialogImage.current?.hide()
+                  if (imageFor == "profile") {
+                    setImage(url)
+                  } else {
+                    setImageBanner(url)
+                  }
+                  setErrorImageProfile(false)
+                  setErrorImageBanner(false)
+                })} />
+            </View>
+          </View>
+        </ComponentSlidingup>
+
+        <ComponentSlidingup ref={dialogStatus}>
+          <View style={{ backgroundColor: 'white', borderTopRightRadius: 20, borderTopLeftRadius: 20, paddingBottom: 35, paddingHorizontal: 19, }}>
+            <Text allowFontScaling={false} style={{ marginTop: 26, marginBottom: 23, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: "#34495e" }}>{esp.lang("community/registrasi_job_seeker", "select_status_job")}</Text>
+            {
+              _status.map((item: any, i: number) => {
+                return (
+                  <TouchableOpacity key={i} onPress={() => {
+                    setDefaultStatus(item)
+                    dialogStatus.current?.hide()
+                  }} style={{ height: 40, borderBottomWidth: 1, borderBottomColor: '#c5c5c5', alignContent: 'center', justifyContent: 'center' }} >
+                    <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }}>{item.title}</Text>
+                  </TouchableOpacity>
+                )
+              })
+            }
+          </View>
+        </ComponentSlidingup>
+      </LibKeyboard_avoid>
+    </View>
+  )
+}