Merge pull request #288 from bipproduction/amalia/04-okt-24

Amalia/04 okt 24

src/module/color_palette/ui/create_palette_color.tsx

@@ -1,13 +1,12 @@
 "use client"
 import { LayoutNavbarNew, TEMA } from '@/module/_global';
-import { useHookstate } from '@hookstate/core';
-import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
-import React, { useState } from 'react';
-import { funCreateTheme } from '../lib/api_theme';
-import toast from 'react-hot-toast';
-import { useRouter } from 'next/navigation';
 import LayoutModal from '@/module/_global/layout/layout_modal';
-import _ from 'lodash';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { funCreateTheme } from '../lib/api_theme';
 
 export default function CreatePaletteColor() {
   const [isValModal, setValModal] = useState(false);
@@ -56,11 +55,46 @@ export default function CreatePaletteColor() {
   }
 
   function onCheck() {
-    if (Object.values(touched).some((v) => v == true))
+    const cek = checkAll()
+    if (!cek)
       return false
     setValModal(true)
   }
 
+  function checkAll() {
+    let nilai = true
+    if (isWarna.name === "") {
+      setTouched(touched => ({ ...touched, name: true }))
+      nilai = false
+    }
+    if (isWarna.utama === "" || isWarna.utama.substring(0, 1) !== '#') {
+      setTouched(touched => ({ ...touched, utama: true }))
+      nilai = false
+    }
+    if (isWarna.bgUtama === "" || isWarna.bgUtama.substring(0, 1) !== '#') {
+      setTouched(touched => ({ ...touched, bgUtama: true }))
+      nilai = false
+    }
+    if (isWarna.bgIcon === "" || isWarna.bgIcon.substring(0, 1) !== '#') {
+      setTouched(touched => ({ ...touched, bgIcon: true }))
+      nilai = false
+    }
+    if (isWarna.bgFiturHome === "" || isWarna.bgFiturHome.substring(0, 1) !== '#') {
+      setTouched(touched => ({ ...touched, bgFiturHome: true }))
+      nilai = false
+    }
+    if (isWarna.bgFiturDivision === "" || isWarna.bgFiturDivision.substring(0, 1) !== '#') {
+      setTouched(touched => ({ ...touched, bgFiturDivision: true }))
+      nilai = false
+    }
+    if (isWarna.bgTotalKegiatan === "" || isWarna.bgTotalKegiatan.substring(0, 1) !== '#') {
+      setTouched(touched => ({ ...touched, bgTotalKegiatan: true }))
+      nilai = false
+    }
+
+    return nilai
+  }
+
   function onValidation(kategori: string, val: string) {
     if (kategori == 'name') {
       setWarna({ ...isWarna, name: val })
@@ -239,8 +273,8 @@ export default function CreatePaletteColor() {
             }
             error={
               touched.bgTotalKegiatan && (
-                isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" : 
+                isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" :
-                  isWarna.bgTotalKegiatan.substring(0, 1) != "#" ? "Kode Warna Tidak Valid" : null  
+                  isWarna.bgTotalKegiatan.substring(0, 1) != "#" ? "Kode Warna Tidak Valid" : null
               )
             }
           />

src/module/color_palette/ui/edit_palette_color.tsx

@@ -1,14 +1,14 @@
 "use client"
 import { LayoutNavbarNew, TEMA } from '@/module/_global';
+import LayoutModal from "@/module/_global/layout/layout_modal";
 import { useHookstate } from '@hookstate/core';
-import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Skeleton, Stack, TextInput } from '@mantine/core';
-import React, { useState } from 'react';
+import { useShallowEffect } from '@mantine/hooks';
-import { IEditTheme } from '../lib/type_theme';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { funEditTheme, funGetThemeById } from '../lib/api_theme';
-import { useParams, useRouter } from 'next/navigation';
+import { IEditTheme } from '../lib/type_theme';
-import { useShallowEffect } from '@mantine/hooks';
-import LayoutModal from "@/module/_global/layout/layout_modal";
 
 export default function EditPaletteColor() {
   const tema = useHookstate(TEMA)
@@ -16,6 +16,7 @@ export default function EditPaletteColor() {
   const [isModal, setModal] = useState(false)
   const param = useParams<{ id: string }>()
   const [loading, setLoading] = useState(true)
+  const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false);
   const [touched, setTouched] = useState({
     name: false,
     utama: false,
@@ -62,6 +63,7 @@ export default function EditPaletteColor() {
 
   async function onSubmit() {
     try {
+      setLoadingKonfirmasi(true)
       const res = await funEditTheme(param.id, isWarna)
       if (res.success) {
         toast.success(res.message);
@@ -72,6 +74,9 @@ export default function EditPaletteColor() {
     } catch (error) {
       console.error(error)
       toast.error("Gagal mengedit tema, coba lagi nanti");
+    } finally {
+      setLoadingKonfirmasi(false)
+      setModal(false)
     }
   }
 
@@ -381,11 +386,13 @@ export default function EditPaletteColor() {
       </Box>
 
 
-      <LayoutModal opened={isModal} onClose={() => setModal(false)} description="Apakah Anda yakin ingin mengubah data?"
+      <LayoutModal loading={loadingKonfirmasi} opened={isModal} onClose={() => setModal(false)} description="Apakah Anda yakin ingin mengubah data?"
         onYes={(val) => {
-          if (val)
+          if (val) {
             onSubmit()
-          setModal(false)
+          } else {
+            setModal(false)
+          }
         }
         } />
     </Box>

src/module/group/ui/drawer_group.tsx

@@ -45,8 +45,10 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
   }
 
   function onCheck() {
-    if (Object.values(touched).some((v) => v == true))
+    const cek = checkAll()
+    if (!cek) {
       return false
+    }
     createData()
   }
 
@@ -58,7 +60,15 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
       } else {
         setTouched({ ...touched, name: false })
       }
-    } 
+    }
+  }
+
+  function checkAll() {
+    if (namaGroup == "" || namaGroup.length < 3) {
+      setTouched({ ...touched, name: true })
+      return false
+    }
+    return true
   }
 
   return (
@@ -102,7 +112,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
             }}
             error={
               touched.name &&
-              (namaGroup == "" ? "Error! harus memasukkan grup" :
+              (namaGroup == "" ? "Grup Tidak Boleh Kosong" :
                 namaGroup.length < 3 ? "Masukkan Minimal 3 karakter" : ""
               )
             }

src/module/group/ui/edit_drawer_group.tsx

@@ -162,7 +162,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
             }}
             error={
               touched.name &&
-              (name == "" ? "Error! harus memasukkan grup" :
+              (name == "" ? "Grup Tidak Boleh Kosong" :
                 name.length < 3 ? "Masukkan Minimal 3 karakter" : ""
               )
             }

src/module/position/ui/drawer_detail_position.tsx

@@ -18,6 +18,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
    const [isModal, setModal] = useState(false)
    const refresh = useHookstate(globalRefreshPosition)
    const [loading, setLoading] = useState(true)
+   const [loadingEdit, setLoadingEdit] = useState(false)
    const tema = useHookstate(TEMA)
    const [data, setData] = useState<any>({
       id: id,
@@ -27,7 +28,6 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
    const [listGroup, setListGorup] = useState<IDataPosition[]>([])
    const [touched, setTouched] = useState({
       name: false,
-      idGroup: false
    });
 
    function onCLose() {
@@ -70,6 +70,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
 
    async function onSubmit() {
       try {
+         setLoadingEdit(true)
          const res = await funEditPosition(id, {
             name: data.name,
             idGroup: data.idGroup
@@ -88,6 +89,8 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
       } catch (error) {
          toast.error('Error');
          toast.error("Edit jabatan gagal, coba lagi nanti");
+      } finally {
+         setLoadingEdit(false)
       }
    }
 
@@ -98,20 +101,20 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
 
    function onCheck() {
       if (Object.values(touched).some((v) => v == true))
-        return false
+         return false
       onSubmit()
    }
 
    function onValidation(kategori: string, val: string) {
       if (kategori == 'name') {
-         setData({...data, name: val})
+         setData({ ...data, name: val })
-        if (val == "" || val.length < 3) {
+         if (val == "" || val.length < 3) {
-          setTouched({ ...touched, name: true })
+            setTouched({ ...touched, name: true })
-        } else {
+         } else {
-          setTouched({ ...touched, name: false })
+            setTouched({ ...touched, name: false })
-        }
+         }
       }
-    }
+   }
 
    async function nonActive(val: boolean) {
       try {
@@ -189,13 +192,12 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
                         size="md"
                         value={String(data.name)}
                         onChange={(e) => { onValidation('name', e.target.value) }}
-                        onBlur={() => setTouched({ ...touched, name: true })}
                         error={
                            touched.name &&
                            (data.name == "" ? "Error! harus memasukkan Nama Jabatan" :
                               data.name.length < 3 ? "Masukkan Minimal 3 karakter" : ""
                            )
-                         }
+                        }
                         radius={10}
                         placeholder="Nama Jabatan"
                      />
@@ -208,7 +210,8 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
                      size="lg"
                      radius={30}
                      fullWidth
-                     onClick={onSubmit}
+                     onClick={() => { onCheck() }}
+                     loading={loadingEdit}
                   >
                      EDIT
                   </Button>

src/module/position/ui/drawer_list_position.tsx

@@ -15,6 +15,7 @@ import { globalRefreshPosition } from "../lib/val_posisition";
 export default function DrawerListPosition({ onCreated }: { onCreated: (val: boolean) => void }) {
    const roleLogin = useHookstate(globalRole)
    const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
+   const [loadingSave, setLoadingSave] = useState(false)
    const router = useRouter()
    const [listGroup, setListGorup] = useState<IDataGroup[]>([])
    const refresh = useHookstate(globalRefreshPosition)
@@ -52,6 +53,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
 
    async function onSubmit() {
       try {
+         setLoadingSave(true)
          const res = await funCreatePosition({
             name: listData.name,
             idGroup: listData.idGroup
@@ -70,23 +72,41 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
 
       } catch (error) {
          toast.error('Error')
+      } finally {
+         setLoadingSave(false)
       }
    }
 
    function onCheck() {
-      if (Object.values(touched).some((v) => v == true))
+      const check = checkAll()
-        return false
+      if (!check)
+         return false
       onSubmit()
    }
-   
+
+   function checkAll() {
+      let nilai = true
+      if (listData.name == "" || listData.name.length < 3) {
+         setTouched(touched => ({ ...touched, name: true }))
+         nilai = false
+      }
+
+      if (roleLogin.get() == "supadmin" && listData.idGroup == "") {
+         setTouched(touched => ({ ...touched, idGroup: true }))
+         nilai = false
+      }
+
+      return nilai
+   }
+
    function onValidation(kategori: string, val: string) {
       if (kategori == 'name') {
-         setListData({...listData, name: val})
+         setListData({ ...listData, name: val })
-        if (val == "" || val.length < 3) {
+         if (val == "" || val.length < 3) {
-          setTouched({ ...touched, name: true })
+            setTouched({ ...touched, name: true })
-        } else {
+         } else {
-          setTouched({ ...touched, name: false })
+            setTouched({ ...touched, name: false })
-        }
+         }
       } else if (kategori == 'idGroup') {
          setListData({ ...listData, idGroup: val })
          if (val == "") {
@@ -95,7 +115,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
             setTouched({ ...touched, idGroup: false })
          }
       }
-    }
+   }
 
    return (
       <Box>
@@ -130,7 +150,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
                sm: "67vh",
                lg: "67vh",
                xl: "70vh"
-               
+
             }}>
                {
                   roleLogin.get() == "supadmin" &&
@@ -149,8 +169,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
                      radius={10}
                      mb={5}
                      withAsterisk
-                     onChange={(e: any) => 
+                     onChange={(e: any) => { onValidation('idGroup', e) }
-                        { onValidation('idGroup', e) }
                      }
                      styles={{
                         input: {
@@ -185,7 +204,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
                      (listData.name == "" ? "Error! harus memasukkan Nama Jabatan" :
                         listData.name.length < 3 ? "Masukkan Minimal 3 karakter" : ""
                      )
-                   }
+                  }
                   required
                />
                <Box pos={"absolute"} bottom={10} left={0} right={0}>
@@ -196,6 +215,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
                      radius={30}
                      fullWidth
                      onClick={() => { onCheck() }}
+                     loading={loadingSave}
                   >
                      SIMPAN
                   </Button>

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

@@ -1,25 +1,26 @@
 "use client";
-import { globalRole, TEMA, WARNA } from "@/module/_global";
+import { globalRole, TEMA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
+import { funGetUserByCookies } from "@/module/auth";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
+import { funGetAllPosition } from "@/module/position/lib/api_position";
+import { useHookstate } from "@hookstate/core";
 import { Avatar, Box, Button, Indicator, rem, Select, Stack, Text, TextInput } from "@mantine/core";
+import { Dropzone } from "@mantine/dropzone";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useRef, useState } from "react";
 import toast from "react-hot-toast";
-import { IDataPositionMember, IDataROleMember } from "../lib/type_member";
-import { funGetAllPosition } from "@/module/position/lib/api_position";
-import { funCreateMember } from "../lib/api_member";
-import _ from "lodash";
-import { useHookstate } from "@hookstate/core";
-import { useShallowEffect } from "@mantine/hooks";
-import { funGetUserByCookies } from "@/module/auth";
-import { valueRoleUser } from "../../lib/val_user";
 import { FaCamera } from "react-icons/fa6";
-import { Dropzone } from "@mantine/dropzone";
+import { valueRoleUser } from "../../lib/val_user";
+import { funCreateMember } from "../lib/api_member";
+import { IDataPositionMember, IDataROleMember } from "../lib/type_member";
 
 export default function CreateMember() {
   const router = useRouter();
   const [isModal, setModal] = useState(false);
+  const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false);
   const [listGroup, setListGorup] = useState<IDataGroup[]>([]);
   const [listPosition, setListPosition] = useState<IDataPositionMember[]>([]);
   const [listUserRole, setListUserRole] = useState<IDataROleMember[]>([]);
@@ -100,37 +101,33 @@ export default function CreateMember() {
 
   async function onSubmit(val: boolean) {
     try {
-      if (_.isEmpty(listData)) {
+      setLoadingKonfirmasi(true)
-        return;
+      const fd = new FormData()
-      }
+      fd.append("file", imgForm)
-      if (val) {
+      fd.append("data", JSON.stringify(
-        const fd = new FormData()
+        {
-        fd.append("file", imgForm)
+          nik: listData.nik,
-        fd.append("data", JSON.stringify(
+          name: listData.name,
-          {
+          phone: listData.phone,
-            nik: listData.nik,
+          email: listData.email,
-            name: listData.name,
+          gender: listData.gender,
-            phone: listData.phone,
+          idGroup: listData.idGroup,
-            email: listData.email,
+          idPosition: listData.idPosition,
-            gender: listData.gender,
+          idUserRole: listData.idUserRole,
-            idGroup: listData.idGroup,
-            idPosition: listData.idPosition,
-            idUserRole: listData.idUserRole,
-          }
-        ))
-        const res = await funCreateMember(fd);
-        if (res.success) {
-          toast.success(res.message);
-          setModal(false);
-          router.push("/member?active=true");
-        } else {
-          toast.error(res.message);
         }
+      ))
+      const res = await funCreateMember(fd);
+      if (res.success) {
+        toast.success(res.message);
+        router.push("/member?active=true");
+      } else {
+        toast.error(res.message);
       }
       setModal(false);
     } catch (error) {
       toast.error("Error");
     } finally {
+      setLoadingKonfirmasi(false)
       setModal(false);
     }
   }
@@ -142,12 +139,61 @@ export default function CreateMember() {
   }, []);
 
   function onCheck() {
-    if (Object.values(touched).some((v) => v == true))
+    const cek = checkAll()
+    if (!cek)
       return false
     setModal(true)
   }
 
-  function onValidation(kategori: string, val: string) {
+  function checkAll() {
+    let nilai = true
+
+    if (listData.nik === "" || listData.nik.length !== 16) {
+      setTouched(touched => ({ ...touched, nik: true }))
+      nilai = false
+    }
+
+    if (listData.name === "") {
+      setTouched(touched => ({ ...touched, name: true }))
+      nilai = false
+    }
+
+    if (listData.phone == "" || !(listData.phone.length >= 10 && listData.phone.length <= 15)) {
+      setTouched(touched => ({ ...touched, phone: true }))
+      nilai = false
+    }
+
+    if (listData.email == "" || !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(listData.email)) {
+      setTouched(touched => ({ ...touched, email: true }))
+      nilai = false
+    }
+
+    if (listData.gender == "" || String(listData.gender) == "null") {
+      setTouched(touched => ({ ...touched, gender: true }))
+      nilai = false
+    }
+
+    if (roleLogin.get() == "supadmin" && (listData.idGroup == "" || String(listData.idGroup) == "null")) {
+      setTouched(touched => ({ ...touched, idGroup: true }))
+      nilai = false
+    }
+
+    if (listData.idPosition === "" || String(listData.idPosition) == "null") {
+      setTouched(touched => ({ ...touched, idPosition: true }))
+      nilai = false
+    }
+
+    if (listData.idUserRole === "" || String(listData.idUserRole) == "null") {
+      setTouched(touched => ({ ...touched, idUserRole: true }))
+      nilai = false
+    }
+
+    return nilai
+
+  }
+
+
+  function onValidation(kategori: string, val: any) {
     if (kategori == 'nik') {
       setListData({ ...listData, nik: val })
       if (val === "" || val.length !== 16) {
@@ -178,28 +224,28 @@ export default function CreateMember() {
       }
     } else if (kategori == 'gender') {
       setListData({ ...listData, gender: val })
-      if (val == "" || val == "null") {
+      if (val == "" || String(val) == "null") {
         setTouched({ ...touched, gender: true })
       } else {
         setTouched({ ...touched, gender: false })
       }
     } else if (kategori == 'idGroup') {
-      setListData({ ...listData, idGroup: val, idPosition: "", })
+      setListData(listData => ({ ...listData, idGroup: val, }))
-      if (val === "") {
+      if (val === "" || String(val) == "null") {
-        setTouched({ ...touched, idGroup: true })
+        setTouched(touched => ({ ...touched, idGroup: true }))
       } else {
         setTouched({ ...touched, idGroup: false })
       }
     } else if (kategori == 'idPosition') {
-      setListData({ ...listData, idPosition: val })
+      setListData(listData => ({ ...listData, idPosition: val }))
-      if (val === "") {
+      if (val === "" || String(val) == "null") {
-        setTouched({ ...touched, idPosition: true })
+        setTouched(touched => ({ ...touched, idPosition: true }))
       } else {
         setTouched({ ...touched, idPosition: false })
       }
     } else if (kategori == 'idUserRole') {
       setListData({ ...listData, idUserRole: val })
-      if (val === "") {
+      if (val === "" || String(val) == "null") {
         setTouched({ ...touched, idUserRole: true })
       } else {
         setTouched({ ...touched, idUserRole: false })
@@ -210,6 +256,7 @@ export default function CreateMember() {
   async function changeGrup(val: any) {
     setListPosition([]);
     onValidation('idGroup', val)
+    onValidation('idPosition', '')
     getAllPosition(val);
   }
 
@@ -269,7 +316,7 @@ export default function CreateMember() {
             onChange={(val: any) => { changeGrup(val) }}
             error={
               touched.idGroup && (
-                listData.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
+                listData.idGroup == "" || String(listData.idGroup) == "null" ? "Grup Tidak Boleh Kosong" : null
               )
             }
           />
@@ -301,7 +348,7 @@ export default function CreateMember() {
           value={listData.idPosition == "" ? null : listData.idPosition}
           error={
             touched.idPosition && (
-              listData.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
+              listData.idPosition == "" || String(listData.idPosition) == "null" ? "Jabatan Tidak Boleh Kosong" : null
             )
           }
         />
@@ -331,7 +378,7 @@ export default function CreateMember() {
           onChange={(val: any) => { onValidation('idUserRole', val) }}
           error={
             touched.idUserRole && (
-              listData.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
+              listData.idUserRole == "" || String(listData.idUserRole) == "null" ? "Role Tidak Boleh Kosong" : null
             )
           }
         />
@@ -449,7 +496,7 @@ export default function CreateMember() {
           onChange={(val: any) => { onValidation('gender', val) }}
           error={
             touched.gender && (
-              listData.gender == "" ? "Jenis Kelamin Tidak Boleh Kosong" : null
+              listData.gender == "" || String(listData.gender == "null") ? "Jenis Kelamin Tidak Boleh Kosong" : null
             )
           }
         />
@@ -471,11 +518,16 @@ export default function CreateMember() {
         </Button>
       </Box>
       <LayoutModal
+        loading={loadingKonfirmasi}
         opened={isModal}
         onClose={() => setModal(false)}
         description="Apakah Anda yakin ingin menambahkan data?"
         onYes={(val) => {
-          onSubmit(val);
+          if (val) {
+            onSubmit(val);
+          } else {
+            setModal(false);
+          }
         }}
       />
     </Box>

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

@@ -1,25 +1,25 @@
 'use client'
-import { globalRole, TEMA, WARNA } from "@/module/_global";
+import { globalRole, TEMA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
 import { funGetAllPosition } from "@/module/position/lib/api_position";
+import { useHookstate } from "@hookstate/core";
 import { Avatar, Box, Button, Indicator, rem, Select, Skeleton, Stack, Text, TextInput } from "@mantine/core";
+import { Dropzone } from "@mantine/dropzone";
 import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useRef, useState } from "react";
 import toast from "react-hot-toast";
-import { HiUser } from "react-icons/hi2";
-import { IDataPositionMember, IDataROleMember, IEditDataMember, IFormMember } from "../lib/type_member";
-import { funEditMember, funGetOneMember, funGetRoleUser } from "../lib/api_member";
-import _ from "lodash";
-import { Dropzone } from "@mantine/dropzone";
 import { FaCamera } from "react-icons/fa6";
-import { useHookstate } from "@hookstate/core";
 import { valueRoleUser } from "../../lib/val_user";
+import { funEditMember, funGetOneMember } from "../lib/api_member";
+import { IDataPositionMember, IDataROleMember, IEditDataMember } from "../lib/type_member";
 
 
 export default function EditMember({ id }: { id: string }) {
    const [isModal, setModal] = useState(false)
+   const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false)
    const router = useRouter()
    const [listGroup, setListGorup] = useState<IDataGroup[]>([])
    const [listPosition, setListPosition] = useState<IDataPositionMember[]>([])
@@ -111,26 +111,24 @@ export default function EditMember({ id }: { id: string }) {
 
    async function onSubmit(val: boolean) {
       try {
-         if (_.isEmpty(data)) {
+         setLoadingKonfirmasi(true)
-            return
+         const fd = new FormData()
+         fd.append("file", imgForm)
+         fd.append("data", JSON.stringify(data))
+
+         const res = await funEditMember(id, fd)
+
+         if (res.success) {
+            toast.success(res.message)
+            router.push(`/member?active=true`)
+         } else {
+            toast.error(res.message)
          }
-         if (val) {
-            const fd = new FormData()
-            fd.append("file", imgForm)
-            fd.append("data", JSON.stringify(data))
-
-            const res = await funEditMember(id, fd)
-
-            if (res.success) {
-               toast.success(res.message)
-               router.push(`/member?active=true`)
-            } else {
-               toast.error(res.message)
-            }
-         }
-
       } catch (error) {
          toast.error('Error');
+      } finally {
+         setLoadingKonfirmasi(false)
+         setModal(false)
       }
    }
 
@@ -171,21 +169,21 @@ export default function EditMember({ id }: { id: string }) {
          }
       } else if (kategori == 'gender') {
          setData({ ...data, gender: val })
-         if (val == "" || val == "null") {
+         if (val == "" || String(val) == "null") {
             setTouched({ ...touched, gender: true })
          } else {
             setTouched({ ...touched, gender: false })
          }
       } else if (kategori == 'idPosition') {
          setData({ ...data, idPosition: val })
-         if (val === "") {
+         if (val === "" || String(val) == "null") {
             setTouched({ ...touched, idPosition: true })
          } else {
             setTouched({ ...touched, idPosition: false })
          }
       } else if (kategori == 'idUserRole') {
          setData({ ...data, idUserRole: val })
-         if (val === "") {
+         if (val === "" || String(val) == "null") {
             setTouched({ ...touched, idUserRole: true })
          } else {
             setTouched({ ...touched, idUserRole: false })
@@ -267,7 +265,7 @@ export default function EditMember({ id }: { id: string }) {
                      value={(data?.idPosition == "") ? null : data.idPosition}
                      error={
                         touched.idPosition && (
-                           data.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
+                           data.idPosition == "" || String(data.idPosition) == "null" ? "Jabatan Tidak Boleh Kosong" : null
                         )
                      }
                   />
@@ -292,7 +290,7 @@ export default function EditMember({ id }: { id: string }) {
                      value={data?.idUserRole}
                      error={
                         touched.idUserRole && (
-                           data.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
+                           data.idUserRole == "" || String(data.idUserRole) == "null" ? "Role Tidak Boleh Kosong" : null
                         )
                      }
                   />
@@ -325,7 +323,6 @@ export default function EditMember({ id }: { id: string }) {
                      }}
                      onChange={(e) => { onValidation('name', e.target.value) }}
                      value={data.name}
-                     onBlur={() => setTouched({ ...touched, name: true })}
                      error={
                         touched.name && (
                            data.name == "" ? "Nama Tidak Boleh Kosong" : null
@@ -366,7 +363,7 @@ export default function EditMember({ id }: { id: string }) {
                      error={
                         touched.phone && (
                            data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
-                              data.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null
+                              data.phone.length < 10 ? "Nomor Telepon Tidak Valid" : null
                         )
                      }
                   />
@@ -395,7 +392,7 @@ export default function EditMember({ id }: { id: string }) {
                      value={data.gender}
                      error={
                         touched.gender && (
-                           data.gender == "" ? "Gender Tidak Boleh Kosong" : null
+                           data.gender == "" || String(data.gender) == "null" ? "Gender Tidak Boleh Kosong" : null
                         )
                      }
                   />
@@ -422,12 +419,14 @@ export default function EditMember({ id }: { id: string }) {
                </Button>
             }
          </Box>
-         <LayoutModal opened={isModal} onClose={() => setModal(false)}
+         <LayoutModal loading={loadingKonfirmasi} opened={isModal} onClose={() => setModal(false)}
             description="Apakah Anda yakin ingin mengubah data?"
             onYes={(val) => {
-               if (val)
+               if (val) {
                   onSubmit(val)
-               setModal(false)
+               } else {
+                  setModal(false)
+               }
             }
             } />
       </Box>