Merge pull request #275 from bipproduction/lukman/30-september-2024

style : update style

src/module/announcement/ui/create_announcement.tsx

@@ -77,6 +77,31 @@ export default function CreateAnnouncement() {
 
    if (isChooseMember) return <CreateUsersAnnouncement onClose={() => { setIsChooseMember(false) }} />
 
+   function onCheck() {
+      if (Object.values(touched).some((v) => v == true))
+        return false
+      setOpen(true)
+   }
+   
+
+   function onValidation(kategori: string, val: string) {
+      if (kategori == 'title') {
+         setisData({ ...isData, title: val })
+         if (val === "") {
+           setTouched({ ...touched, title: true })
+         } else {
+           setTouched({ ...touched, title: false })
+         }
+      } else if (kategori == 'desc') {
+        setisData({ ...isData, desc: val })
+        if (val === "") {
+          setTouched({ ...touched, desc: true })
+        } else {
+          setTouched({ ...touched, desc: false })
+        }
+      } 
+    }
+
    return (
       <Box>
          <LayoutNavbarNew back="/announcement/" title="Tambah Pengumuman" menu={<></>} />
@@ -93,11 +118,7 @@ export default function CreateAnnouncement() {
                   },
                }}
                value={isData.title}
-               onChange={(e) => {
+               onChange={(e) => { onValidation('title', e.target.value) }}
-                  setisData({ ...isData, title: e.target.value })
-                  setTouched({ ...touched, title: false })
-               }}
-               onBlur={() => setTouched({ ...touched, title: true })}
                error={
                   touched.title && (
                      isData.title == "" ? "Judul Tidak Boleh Kosong" : null
@@ -119,11 +140,7 @@ export default function CreateAnnouncement() {
                   },
                }}
                value={isData.desc}
-               onChange={(e) => {
+               onChange={(e) => { onValidation('desc', e.target.value) }}
-                  setisData({ ...isData, desc: e.target.value })
-                  setTouched({ ...touched, desc: false })
-               }}
-               onBlur={() => setTouched({ ...touched, desc: true })}
                error={
                   touched.desc && (
                      isData.desc == "" ? "Pengumuman Tidak Boleh Kosong" : null
@@ -175,16 +192,7 @@ export default function CreateAnnouncement() {
                size="lg"
                radius={30}
                fullWidth
-               onClick={() => { 
+               onClick={() => { onCheck() }}
-                  if (
-                     isData.title !== "" &&
-                     isData.desc !== "" 
-                  ) {
-                     setOpen(true)
-                  } else {
-                     toast.error("Isi data dengan lengkap")
-                  }
-                }}
             >
                Simpan
             </Button>

src/module/announcement/ui/edit_announcement.tsx

@@ -19,6 +19,7 @@ export default function EditAnnouncement() {
    const [isChooseDivisi, setChooseDivisi] = useState(false)
    const param = useParams<{ id: string }>()
    const [loading, setLoading] = useState(true)
+   const [loadingSubmit, setLoadingSubmit] = useState(false)
    const router = useRouter()
    const tema = useHookstate(TEMA)
    const [touched, setTouched] = useState({
@@ -84,6 +85,7 @@ export default function EditAnnouncement() {
 
    async function onSubmit() {
       try {
+         setLoadingSubmit(true)
          const response = await funEditAnnouncement(param.id, {
             title: body.title,
             desc: body.desc,
@@ -92,15 +94,18 @@ export default function EditAnnouncement() {
 
          if (response.success) {
             toast.success(response.message)
+            setLoadingSubmit(false)
             router.push(`/announcement/${param.id}`)
          } else {
             toast.error(response.message)
          }
+         setLoadingSubmit(false)
       } catch (error) {
          console.error(error)
          toast.error("Gagal mengedit pengumuman, coba lagi nanti");
+      } finally {
+         setLoadingSubmit(false)
       }
-
       setOpen(false)
    }
 
@@ -110,6 +115,31 @@ export default function EditAnnouncement() {
    if (isChooseDivisi) return <EditChooseMember onClose={() => { setChooseDivisi(false) }} />
 
 
+   function onCheck() {
+      if (Object.values(touched).some((v) => v == true))
+         return false
+      setOpen(true)
+   }
+
+
+   function onValidation(kategori: string, val: string) {
+      if (kategori == 'title') {
+         setBody({ ...body, title: val })
+         if (val === "") {
+            setTouched({ ...touched, title: true })
+         } else {
+            setTouched({ ...touched, title: false })
+         }
+      } else if (kategori == 'desc') {
+         setBody({ ...body, desc: val })
+         if (val === "") {
+            setTouched({ ...touched, desc: true })
+         } else {
+            setTouched({ ...touched, desc: false })
+         }
+      }
+   }
+
    return (
       <>
          <LayoutNavbarNew back="" title="Edit Pengumuman" menu={<></>} />
@@ -139,11 +169,7 @@ export default function EditAnnouncement() {
                         },
                      }}
                      value={body.title}
-                     onChange={(val) => {
+                     onChange={(e) => { onValidation('title', e.target.value) }}
-                        setBody({ ...body, title: val.target.value })
-                        setTouched({ ...touched, title: false })
-                     }}
-                     onBlur={() => setTouched({ ...touched, title: true })}
                      error={
                         touched.title && (
                            body.title == "" ? "Judul Tidak Boleh Kosong" : null
@@ -165,27 +191,22 @@ export default function EditAnnouncement() {
                         },
                      }}
                      value={body.desc}
-                     onChange={(val) => {
+                     onChange={(e) => { onValidation('desc', e.target.value) }}
-                        setBody({ ...body, desc: val.target.value })
-                        setTouched({ ...touched, desc: false })
-                     }}
-                     onBlur={() => setTouched({ ...touched, desc: true })}
                      error={
                         touched.desc && (
                            body.desc == "" ? "Pengumuman Tidak Boleh Kosong" : null
                         )
                      }
-
                   />
-                  <Box pt={10}  w={"100%"}>
+                  <Box pt={10} w={"100%"}>
                      <Group justify="space-between" style={{
-                     border: `1px solid ${tema.get().utama}`,
+                        border: `1px solid ${tema.get().utama}`,
-                     maxWidth: rem(550),
+                        maxWidth: rem(550),
                         padding: 10,
                         borderRadius: 10
-                  }}
+                     }}
 
-                     onClick={() => { setChooseDivisi(true) }}
+                        onClick={() => { setChooseDivisi(true) }}
                      >
                         <Text size="sm">
                            Tambah divisi penerima pengumuman
@@ -250,22 +271,13 @@ export default function EditAnnouncement() {
                   size="lg"
                   radius={30}
                   fullWidth
-                  onClick={() => {
+                  onClick={() => { onCheck() }}
-                     if (
-                        body.title !== "" &&
-                        body.desc !== ""
-                     ) {
-                        setOpen(true)
-                     } else {
-                        toast.error("Isi data dengan lengkap")
-                     }
-                  }}
                >
                   Simpan
                </Button>
             }
          </Box>
-         <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
+         <LayoutModal opened={isOpen} loading={loadingSubmit} onClose={() => setOpen(false)}
             description="Apakah Anda yakin ingin mengubah data?"
             onYes={(val) => {
                if (val) {

src/module/calender/ui/detail_event_division.tsx

@@ -116,7 +116,9 @@ export default function DetailEventDivision() {
                     xl: 10.5,
                   }}
                 >
-                  <Text lineClamp={1} pl={isMobile2 ? 5 : 0}>{isDataCalender?.title}</Text>
+                  <Text style={{
+                    overflowWrap: "break-word"
+                  }} pl={isMobile2 ? 5 : 0}>{isDataCalender?.title}</Text>
                 </Grid.Col>
               </Grid>
               <Grid>

src/module/calender/ui/navbar_create_division_calender.tsx

@@ -25,6 +25,7 @@ export default function NavbarCreateDivisionCalender() {
   const param = useParams<{ id: string, detail: string }>()
   const tema = useHookstate(TEMA)
   const isMobile = useMediaQuery('(max-width: 369px)');
+  const isMobile2 = useMediaQuery("(max-width: 438px)");
   const [touched, setTouched] = useState({
     title: false,
     dateStart: false,
@@ -331,18 +332,13 @@ export default function NavbarCreateDivisionCalender() {
                           <Box key={i}>
                             <Grid align='center' mt={10}
                             >
-                              <Grid.Col span={9}>
+                              <Grid.Col span={1}>
-                                <Group>
+                                <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
-                                  <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
+                              </Grid.Col>
-                                  <Box w={{
+                              <Grid.Col span={8}>
-                                    base: isMobile ? 130 : 140,
+                                <Text c={tema.get().utama} fw={"bold"} lineClamp={1} pl={isMobile2 ? 40 : 30} fz={isMobile ? 14 : 16} >
-                                    xl: 270
+                                  {v.name}
-                                  }}>
+                                </Text>
-                                    <Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16} >
-                                      {v.name}
-                                    </Text>
-                                  </Box>
-                                </Group>
                               </Grid.Col>
                               <Grid.Col span={3}>
                                 <Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>

src/module/task/ui/edit_detail_task.tsx

@@ -34,6 +34,9 @@ export default function EditDetailTask() {
    const [loading, setLoading] = useState(true)
    const [idTugas, setIdTugas] = useState("")
    const tema = useHookstate(TEMA)
+   const [touched, setTouched] = useState({
+      title: false,
+   });
 
    async function onSubmit() {
       if (value[0] == null || value[1] == null)
@@ -89,6 +92,23 @@ export default function EditDetailTask() {
       getOneData();
    }, [param.detail])
 
+   function onCheck() {
+      if (Object.values(touched).some((v) => v == true))
+         return false
+      setOpenModal(true)
+   }
+
+
+   function onValidation(kategori: string, val: string) {
+      if (kategori == 'title') {
+         setTitle(val)
+         if (val === "") {
+            setTouched({ ...touched, title: true })
+         } else {
+            setTouched({ ...touched, title: false })
+         }
+      }
+   }
 
    return (
       <Box>
@@ -161,7 +181,14 @@ export default function EditDetailTask() {
                      placeholder="Input Judul Tahapan"
                      size="md"
                      value={title}
-                     onChange={(e) => { setTitle(e.target.value) }}
+                     error={
+                        touched.title &&
+                        (title == "" ? "Error! harus memasukkan Judul Tahapan" : ""
+                        )
+                      }
+                     onChange={(e) => {
+                        onValidation('title', e.target.value)
+                      }}
                   />
                }
             </Stack>
@@ -180,7 +207,7 @@ export default function EditDetailTask() {
                   size="lg"
                   radius={30}
                   fullWidth
-                  onClick={() => { setOpenModal(true) }}
+                  onClick={() => { onCheck() }}
                >
                   Simpan
                </Button>

src/module/user/member/ui/create_member.tsx

@@ -97,16 +97,6 @@ export default function CreateMember() {
     }
   }
 
-  async function changeGrup(val: any) {
-    setListPosition([]);
-    setListData({
-      ...listData,
-      idGroup: val,
-      idPosition: "",
-    });
-
-    getAllPosition(val);
-  }
 
   async function onSubmit(val: boolean) {
     try {
@@ -151,6 +141,78 @@ export default function CreateMember() {
     getLogin()
   }, []);
 
+  function onCheck() {
+    if (Object.values(touched).some((v) => v == true))
+      return false
+    setModal(true)
+  }
+
+  function onValidation(kategori: string, val: string) {
+    if (kategori == 'nik') {
+      setListData({ ...listData, nik: val })
+      if (val === "" || val.length !== 16) {
+        setTouched({ ...touched, nik: true })
+      } else {
+        setTouched({ ...touched, nik: false })
+      }
+    } else if (kategori == 'name') {
+      setListData({ ...listData, name: val })
+      if (val === "") {
+        setTouched({ ...touched, name: true })
+      } else {
+        setTouched({ ...touched, name: false })
+      }
+    } else if (kategori == 'phone') {
+      setListData({ ...listData, phone: val })
+      if (val == "" || !(val.length >= 10 && val.length <= 15)) {
+        setTouched({ ...touched, phone: true })
+      } else {
+        setTouched({ ...touched, phone: false })
+      }
+    } else if (kategori == 'email') {
+      setListData({ ...listData, email: val })
+      if (val == "" || !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(val)) {
+        setTouched({ ...touched, email: true })
+      } else {
+        setTouched({ ...touched, email: false })
+      }
+    } else if (kategori == 'gender') {
+      setListData({ ...listData, gender: val })
+      if (val == "" || val == "null") {
+        setTouched({ ...touched, gender: true })
+      } else {
+        setTouched({ ...touched, gender: false })
+      }
+    } else if (kategori == 'idGroup') {
+      setListData({ ...listData, idGroup: val, idPosition: "", })
+      if (val === "") {
+        setTouched({ ...touched, idGroup: true })
+      } else {
+        setTouched({ ...touched, idGroup: false })
+      }
+    } else if (kategori == 'idPosition') {
+      setListData({ ...listData, idPosition: val })
+      if (val === "") {
+        setTouched({ ...touched, idPosition: true })
+      } else {
+        setTouched({ ...touched, idPosition: false })
+      }
+    } else if (kategori == 'idUserRole') {
+      setListData({ ...listData, idUserRole: val })
+      if (val === "") {
+        setTouched({ ...touched, idUserRole: true })
+      } else {
+        setTouched({ ...touched, idUserRole: false })
+      }
+    }
+  }
+
+  async function changeGrup(val: any) {
+    setListPosition([]);
+    onValidation('idGroup', val)
+    getAllPosition(val);
+  }
+
 
   return (
     <Box>
@@ -204,11 +266,7 @@ export default function CreateMember() {
                 }))
                 : []
             }
-            onChange={(val: any) => {
+            onChange={(val: any) => { changeGrup(val) }}
-              changeGrup(val);
-              setTouched({ ...touched, idGroup: false })
-            }}
-            onBlur={() => setTouched({ ...touched, idGroup: true })}
             error={
               touched.idGroup && (
                 listData.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
@@ -239,16 +297,8 @@ export default function CreateMember() {
               }))
               : []
           }
-          onChange={(val: any) => {
+          onChange={(val: any) => { onValidation('idPosition', val) }}
-            setListData({
-              ...listData,
-              idPosition: val,
-            })
-            setTouched({ ...touched, idPosition: false })
-          }
-          }
           value={listData.idPosition == "" ? null : listData.idPosition}
-          onBlur={() => setTouched({ ...touched, idPosition: true })}
           error={
             touched.idPosition && (
               listData.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
@@ -278,15 +328,7 @@ export default function CreateMember() {
               }))
               : []
           }
-          onChange={(val: any) => {
+          onChange={(val: any) => { onValidation('idUserRole', val) }}
-            setListData({
-              ...listData,
-              idUserRole: val,
-            })
-            setTouched({ ...touched, idUserRole: false })
-          }
-          }
-          onBlur={() => setTouched({ ...touched, idUserRole: true })}
           error={
             touched.idUserRole && (
               listData.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
@@ -308,11 +350,7 @@ export default function CreateMember() {
               borderColor: tema.get().utama,
             },
           }}
-          onChange={(event: any) => {
+          onChange={(e) => { onValidation('nik', e.target.value) }}
-            setListData({ ...listData, nik: event.target.value });
-            setTouched({ ...touched, nik: false });
-          }}
-          onBlur={() => setTouched({ ...touched, nik: true })}
           error={
             touched.nik && (
               listData.nik === "" ? "NIK Tidak Boleh Kosong" :
@@ -335,15 +373,7 @@ export default function CreateMember() {
               borderColor: tema.get().utama,
             },
           }}
-          onChange={(event: any) => {
+          onChange={(e) => { onValidation('name', e.target.value) }}
-            setListData({
-              ...listData,
-              name: event.target.value,
-            })
-            setTouched({ ...touched, name: false })
-          }
-          }
-          onBlur={() => setTouched({ ...touched, name: true })}
           error={
             touched.name && (
               listData.name == "" ? "Nama Tidak Boleh Kosong" : null
@@ -365,15 +395,7 @@ export default function CreateMember() {
               borderColor: tema.get().utama,
             },
           }}
-          onChange={(event: any) => {
+          onChange={(e) => { onValidation('email', e.target.value) }}
-            setListData({
-              ...listData,
-              email: event.target.value,
-            })
-            setTouched({ ...touched, email: false })
-          }
-          }
-          onBlur={() => setTouched({ ...touched, email: true })}
           error={
             touched.email && (
               listData.email == "" ? "Email Tidak Boleh Kosong" :
@@ -397,15 +419,7 @@ export default function CreateMember() {
               borderColor: tema.get().utama,
             },
           }}
-          onChange={(event: any) => {
+          onChange={(e) => { onValidation('phone', e.target.value); }}
-            setListData({
-              ...listData,
-              phone: "62" + event.target.value,
-            })
-            setTouched({ ...touched, phone: false })
-          }
-          }
-          onBlur={() => setTouched({ ...touched, phone: true })}
           error={
             touched.phone && (
               listData.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
@@ -432,15 +446,7 @@ export default function CreateMember() {
             { value: "M", label: "Laki-laki" },
             { value: "F", label: "Perempuan" },
           ]}
-          onChange={(val: any) => {
+          onChange={(val: any) => { onValidation('gender', val) }}
-            setListData({
-              ...listData,
-              gender: val,
-            })
-            setTouched({ ...touched, gender: false })
-          }
-          }
-          onBlur={() => setTouched({ ...touched, gender: true })}
           error={
             touched.gender && (
               listData.gender == "" ? "Jenis Kelamin Tidak Boleh Kosong" : null
@@ -459,22 +465,7 @@ export default function CreateMember() {
           size="md"
           radius={30}
           fullWidth
-          onClick={() => {
+          onClick={() => { onCheck() }}
-            if (
-              listData.nik !== "" &&
-              listData.name !== "" &&
-              listData.email !== "" &&
-              listData.phone !== "" &&
-              listData.gender !== "" &&
-              listData.idGroup !== "" &&
-              listData.idPosition !== "" &&
-              listData.idUserRole !== ""
-            ) {
-              setModal(true);
-            } else {
-              toast.error("Mohon lengkapi semua form");
-            }
-          }}
         >
           Simpan
         </Button>

src/module/user/member/ui/edit_member.tsx

@@ -101,15 +101,6 @@ export default function EditMember({ id }: { id: string }) {
       }
    }
 
-   async function changeGrup(val: any) {
-      setListPosition([])
-      setData({
-         ...data,
-         idGroup: val,
-         idPosition: ""
-      })
-      getAllPosition(val)
-   }
 
    useShallowEffect(() => {
       getAllGroup()
@@ -143,6 +134,65 @@ export default function EditMember({ id }: { id: string }) {
       }
    }
 
+   function onCheck() {
+      if (Object.values(touched).some((v) => v == true))
+         return false
+      setModal(true)
+   }
+
+   function onValidation(kategori: string, val: string) {
+      if (kategori == 'nik') {
+         setData({ ...data, nik: val })
+         if (val === "" || val.length !== 16) {
+            setTouched({ ...touched, nik: true })
+         } else {
+            setTouched({ ...touched, nik: false })
+         }
+      } else if (kategori == 'name') {
+         setData({ ...data, name: val })
+         if (val === "") {
+            setTouched({ ...touched, name: true })
+         } else {
+            setTouched({ ...touched, name: false })
+         }
+      } else if (kategori == 'phone') {
+         setData({ ...data, phone: val })
+         if (val == "" || !(val.length >= 10 && val.length <= 15)) {
+            setTouched({ ...touched, phone: true })
+         } else {
+            setTouched({ ...touched, phone: false })
+         }
+      } else if (kategori == 'email') {
+         setData({ ...data, email: val })
+         if (val == "" || !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(val)) {
+            setTouched({ ...touched, email: true })
+         } else {
+            setTouched({ ...touched, email: false })
+         }
+      } else if (kategori == 'gender') {
+         setData({ ...data, gender: val })
+         if (val == "" || val == "null") {
+            setTouched({ ...touched, gender: true })
+         } else {
+            setTouched({ ...touched, gender: false })
+         }
+      } else if (kategori == 'idPosition') {
+         setData({ ...data, idPosition: val })
+         if (val === "") {
+            setTouched({ ...touched, idPosition: true })
+         } else {
+            setTouched({ ...touched, idPosition: false })
+         }
+      } else if (kategori == 'idUserRole') {
+         setData({ ...data, idUserRole: val })
+         if (val === "") {
+            setTouched({ ...touched, idUserRole: true })
+         } else {
+            setTouched({ ...touched, idUserRole: false })
+         }
+      }
+   }
+
    return (
       <Box>
          <Stack
@@ -180,7 +230,7 @@ export default function EditMember({ id }: { id: string }) {
                      src={img}
                      style={{
                         border: `1px solid ${"#C1BFBFFF"}`
-                      }}
+                     }}
                   />
                </Indicator>
             }
@@ -196,36 +246,6 @@ export default function EditMember({ id }: { id: string }) {
                </>
                :
                <>
-
-                  {/* <Select
-                     placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30}
-                     styles={{
-                        input: {
-                           color: tema.get().utama,
-                           borderRadius: tema.get().utama,
-                           borderColor: tema.get().utama,
-                        },
-                     }}
-                     data={
-                        listGroup
-                           ? listGroup.map((data) => ({
-                              value: data.id,
-                              label: data.name,
-                           }))
-                           : []
-                     }
-                     onChange={(val: any) => {
-                        changeGrup(val)
-                        setTouched({ ...touched, idGroup: false })
-                     }}
-                     value={data?.idGroup}
-                     onBlur={() => setTouched({ ...touched, idGroup: true })}
-                     error={
-                        touched.idGroup && (
-                           data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
-                        )
-                     }
-                  /> */}
                   <Select
                      placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
                      styles={{
@@ -243,12 +263,8 @@ export default function EditMember({ id }: { id: string }) {
                            }))
                            : []
                      }
-                     onChange={(val: any) => {
+                     onChange={(val: any) => { onValidation('idPosition', val) }}
-                        setData({ ...data, idPosition: val })
-                        setTouched({ ...touched, idPosition: false })
-                     }}
                      value={(data?.idPosition == "") ? null : data.idPosition}
-                     onBlur={() => setTouched({ ...touched, idPosition: true })}
                      error={
                         touched.idPosition && (
                            data.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
@@ -272,12 +288,8 @@ export default function EditMember({ id }: { id: string }) {
                            }))
                            : []
                      }
-                     onChange={(val: any) => {
+                     onChange={(val: any) => { onValidation('idUserRole', val) }}
-                        setData({ ...data, idUserRole: val })
-                        setTouched({ ...touched, idUserRole: false })
-                     }}
                      value={data?.idUserRole}
-                     onBlur={() => setTouched({ ...touched, idUserRole: true })}
                      error={
                         touched.idUserRole && (
                            data.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
@@ -293,12 +305,8 @@ export default function EditMember({ id }: { id: string }) {
                            borderColor: tema.get().utama,
                         },
                      }}
-                     onChange={(e) => {
+                     onChange={(e) => { onValidation('nik', e.target.value) }}
-                        setData({ ...data, nik: e.target.value })
-                        setTouched({ ...touched, nik: false })
-                     }}
                      value={data.nik}
-                     onBlur={() => setTouched({ ...touched, nik: true })}
                      error={
                         touched.nik && (
                            data.nik === "" ? "NIK Tidak Boleh Kosong" :
@@ -315,10 +323,7 @@ export default function EditMember({ id }: { id: string }) {
                            borderColor: tema.get().utama,
                         },
                      }}
-                     onChange={(e) => {
+                     onChange={(e) => { onValidation('name', e.target.value) }}
-                        setData({ ...data, name: e.target.value })
-                        setTouched({ ...touched, name: false })
-                     }}
                      value={data.name}
                      onBlur={() => setTouched({ ...touched, name: true })}
                      error={
@@ -336,12 +341,8 @@ export default function EditMember({ id }: { id: string }) {
                            borderColor: tema.get().utama,
                         },
                      }}
-                     onChange={(e) => {
+                     onChange={(e) => { onValidation('email', e.target.value) }}
-                        setData({ ...data, email: e.target.value })
-                        setTouched({ ...touched, email: false })
-                     }}
                      value={data.email}
-                     onBlur={() => setTouched({ ...touched, email: true })}
                      error={
                         touched.email && (
                            data.email == "" ? "Email Tidak Boleh Kosong" :
@@ -360,12 +361,8 @@ export default function EditMember({ id }: { id: string }) {
                      }}
                      placeholder="8xxx xxxx xxxx"
                      leftSection={<Text>+62</Text>}
-                     onChange={(e) => {
+                     onChange={(e) => { onValidation('phone', e.target.value); }}
-                        setData({ ...data, phone: e.target.value })
-                        setTouched({ ...touched, phone: false })
-                     }}
                      value={data.phone}
-                     onBlur={() => setTouched({ ...touched, phone: true })}
                      error={
                         touched.phone && (
                            data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
@@ -394,12 +391,8 @@ export default function EditMember({ id }: { id: string }) {
                            }
                         ]
                      }
-                     onChange={(val: any) => {
+                     onChange={(val: any) => { onValidation('gender', val) }}
-                        setData({ ...data, gender: val })
-                        setTouched({ ...touched, gender: false })
-                     }}
                      value={data.gender}
-                     onBlur={() => setTouched({ ...touched, gender: true })}
                      error={
                         touched.gender && (
                            data.gender == "" ? "Gender Tidak Boleh Kosong" : null
@@ -423,22 +416,7 @@ export default function EditMember({ id }: { id: string }) {
                   size="md"
                   radius={30}
                   fullWidth
-                  onClick={() => {
+                  onClick={() => { onCheck() }}
-                     if (
-                        data.nik !== "" &&
-                        data.name !== "" &&
-                        data.email !== "" &&
-                        data.phone !== "" &&
-                        data.gender !== "" &&
-                        data.idGroup !== "" &&
-                        data.idPosition !== "" &&
-                        data.idUserRole !== ""
-                     ) {
-                        setModal(true);
-                     } else {
-                        toast.error("Mohon lengkapi semua form");
-                     }
-                  }}
                >
                   Simpan
                </Button>