Merge pull request #290 from bipproduction/amalia/05-okt-24

Amalia/05 okt 24

src/module/announcement/ui/create_announcement.tsx

@@ -19,14 +19,13 @@ export default function CreateAnnouncement() {
    const memberGroup = useHookstate(globalMemberAnnouncement)
    const memberValue = memberGroup.get() as GroupData[]
    const [selectedFiles, setSelectedFiles] = useState<any>([])
+   const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false)
    const router = useRouter()
    const tema = useHookstate(TEMA)
    const [data, setData] = useWibuRealtime({
       WIBU_REALTIME_TOKEN: keyWibu,
       project: "sdm"
    })
-
-
    const [isChooseMember, setIsChooseMember] = useState(false)
    const [isData, setisData] = useState({
       title: "",
@@ -37,8 +36,10 @@ export default function CreateAnnouncement() {
       desc: false
    });
 
+
    async function onSubmit() {
       try {
+         setLoadingKonfirmasi(true)
          const response = await funCreateAnnouncement({
             title: isData.title,
             desc: isData.desc,
@@ -56,9 +57,11 @@ export default function CreateAnnouncement() {
       } catch (error) {
          console.error(error)
          toast.error("Gagal menambahkan pengumuman, coba lagi nanti");
+      } finally {
+         setLoadingKonfirmasi(false)
+         setOpen(false)
       }
 
-      setOpen(false)
    }
 
    async function loadData() {
@@ -69,18 +72,31 @@ export default function CreateAnnouncement() {
       loadData()
    }, [])
 
-   function onToChooseMember() {
-      setIsChooseMember(true)
-   }
-
-   if (isChooseMember) return <CreateUsersAnnouncement onClose={() => { setIsChooseMember(false) }} />
 
    function onCheck() {
-      if (Object.values(touched).some((v) => v == true))
+      const cek = checkAll()
+      if (!cek)
          return false
+
+      if (memberValue.length == 0)
+         return toast.error("Error! silahkan pilih divisi")
+
       setOpen(true)
    }
 
+   function checkAll() {
+      let nilai = true
+      if (isData.title === "") {
+         setTouched(touched => ({ ...touched, title: true }))
+         nilai = false
+      }
+      if (isData.desc === "") {
+         setTouched(touched => ({ ...touched, desc: true }))
+         nilai = false
+      }
+      return nilai
+   }
+
 
    function onValidation(kategori: string, val: string) {
       if (kategori == 'title') {
@@ -100,6 +116,8 @@ export default function CreateAnnouncement() {
       }
    }
 
+   if (isChooseMember) return <CreateUsersAnnouncement onClose={() => { setIsChooseMember(false) }} />
+
    return (
       <Box>
          <LayoutNavbarNew back="/announcement/" title="Tambah Pengumuman" menu={<></>} />
@@ -151,7 +169,7 @@ export default function CreateAnnouncement() {
                   padding: 10,
                   borderRadius: 10
                }}
-                  onClick={() => { onToChooseMember() }}
+                  onClick={() => { setIsChooseMember(true) }}
                >
                   <Text size="sm">
                      Tambah divisi penerima pengumuman
@@ -162,7 +180,7 @@ export default function CreateAnnouncement() {
             <Box pt={20} mb={100}>
                <Text c={tema.get().utama} mb={10}>Divisi Terpilih</Text>
                {(memberGroup.length === 0) ? (
-                  <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text>
+                  <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada divisi yang dipilih</Text>
                ) : memberGroup.get().map((v: any, i: any) => {
                   return (
                      <Box key={i} mt={10}>
@@ -195,13 +213,14 @@ export default function CreateAnnouncement() {
                Simpan
             </Button>
          </Box>
-         <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
+         <LayoutModal loading={loadingKonfirmasi} opened={isOpen} onClose={() => setOpen(false)}
             description="Apakah Anda yakin ingin menambahkan data?"
             onYes={(val) => {
                if (val) {
                   onSubmit()
+               } else {
+                  setOpen(false)
                }
-               setOpen(false)
             }} />
       </Box>
 

src/module/announcement/ui/create_users_announcement.tsx

@@ -1,15 +1,16 @@
 "use client";
-import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA } from '@/module/_global';
 import { funGetGroupDivision } from '@/module/group/lib/api_group';
-import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
-import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
-import React, { useState } from 'react';
-import { FaCheck } from 'react-icons/fa';
-import { GroupData } from '../lib/type_announcement';
 import { useHookstate } from '@hookstate/core';
-import { globalMemberAnnouncement } from '../lib/val_announcement';
+import { ActionIcon, Box, Button, Divider, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
-import { FaMinus } from 'react-icons/fa6';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
 import toast from 'react-hot-toast';
+import { FaCheck } from 'react-icons/fa';
+import { FaMinus } from 'react-icons/fa6';
+import { HiChevronLeft } from 'react-icons/hi2';
+import { GroupData } from '../lib/type_announcement';
+import { globalMemberAnnouncement } from '../lib/val_announcement';
 
 
 
@@ -112,7 +113,13 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
 
   return (
     <div>
-      <LayoutNavbarNew back="" title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
+      <LayoutNavbarNew state={
+        <Box>
+          <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
+            <HiChevronLeft size={20} color='white' />
+          </ActionIcon>
+        </Box>
+      } title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
       <Box p={20} pb={100}>
         <Group justify='flex-end' mb={20}>
           <Text

src/module/announcement/ui/edit_announcement.tsx

@@ -1,21 +1,21 @@
 'use client'
-import { LayoutNavbarNew, TEMA, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, TEMA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
+import { useHookstate } from "@hookstate/core";
 import { Box, Button, Flex, Group, List, rem, Skeleton, Stack, Text, Textarea, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
-import { HiOutlineChevronRight } from "react-icons/hi2";
-import { funEditAnnouncement, funGetAnnouncementById } from "../lib/api_announcement";
-import { useParams, useRouter } from "next/navigation";
-import { useHookstate } from "@hookstate/core";
-import { globalMemberEditAnnouncement } from "../lib/val_announcement";
-import { GroupData, GroupDataEditAnnouncement } from "../lib/type_announcement";
-import EditChooseMember from "./edit_choose_member";
 import { IoIosArrowForward } from "react-icons/io";
+import { funEditAnnouncement, funGetAnnouncementById } from "../lib/api_announcement";
+import { GroupData } from "../lib/type_announcement";
+import { globalMemberEditAnnouncement } from "../lib/val_announcement";
+import EditChooseMember from "./edit_choose_member";
 
 export default function EditAnnouncement() {
    const [isOpen, setOpen] = useState(false)
+   const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false)
    const [isChooseDivisi, setChooseDivisi] = useState(false)
    const param = useParams<{ id: string }>()
    const [loading, setLoading] = useState(true)
@@ -75,6 +75,7 @@ export default function EditAnnouncement() {
          toast.error("Gagal mendapatkan pengumuman, coba lagi nanti")
       } finally {
          setLoading(false)
+         setOpen(false)
       }
    }
 
@@ -94,30 +95,24 @@ 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)
       }
-      setOpen(false)
    }
 
-
-
-
-   if (isChooseDivisi) return <EditChooseMember onClose={() => { setChooseDivisi(false) }} />
-
-
    function onCheck() {
       if (Object.values(touched).some((v) => v == true))
          return false
+      if (memberGroup.get().length == 0)
+         return toast.error("Error! silahkan pilih divisi")
       setOpen(true)
    }
 
@@ -140,6 +135,8 @@ export default function EditAnnouncement() {
       }
    }
 
+   if (isChooseDivisi) return <EditChooseMember onClose={() => { setChooseDivisi(false) }} />
+
    return (
       <>
          <LayoutNavbarNew back="" title="Edit Pengumuman" menu={<></>} />
@@ -160,7 +157,7 @@ export default function EditAnnouncement() {
                :
                <>
                   <TextInput
-                     size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
+                     size="md" type="text" radius={10} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
                      styles={{
                         input: {
                            color: tema.get().utama,
@@ -231,28 +228,34 @@ export default function EditAnnouncement() {
                   ))
 
                :
-               memberGroup.get().map((v: any, i: any) => {
+               <>
-                  return (
+                  <Text c={tema.get().utama} mb={10}>Divisi Terpilih</Text>
-                     <Box key={i} mt={10}>
+                  {
-                        <Text fw={"bold"}>{v.name}</Text>
+                     memberGroup.get().length == 0 ? <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada divisi yang dipilih</Text> :
-                        <Box pl={20} pr={10}>
+                        memberGroup.get().map((v: any, i: any) => {
-                           <Flex direction={"column"} gap={"md"}>
+                           return (
-                              <List>
+                              <Box key={i} mt={10}>
-                                 {
+                                 <Text fw={"bold"}>{v.name}</Text>
-                                    v.Division.map((division: any) => {
+                                 <Box pl={20} pr={10}>
-                                       return <List.Item key={division.id}>
+                                    <Flex direction={"column"} gap={"md"}>
-                                          <Text lineClamp={1}>{division.name}</Text>
+                                       <List>
-                                       </List.Item>
+                                          {
-                                    })
+                                             v.Division.map((division: any) => {
-                                 }
+                                                return <List.Item key={division.id}>
-                              </List>
+                                                   <Text lineClamp={1}>{division.name}</Text>
-                           </Flex>
+                                                </List.Item>
-                        </Box>
+                                             })
-                     </Box>
+                                          }
-                  );
+                                       </List>
+                                    </Flex>
+                                 </Box>
+                              </Box>
+                           );
+
+                        })
+                  }
+               </>
 
-               }
-               )
             }
 
          </Box>
@@ -282,8 +285,9 @@ export default function EditAnnouncement() {
             onYes={(val) => {
                if (val) {
                   onSubmit()
+               } else {
+                  setOpen(false)
                }
-               setOpen(false)
             }} />
       </>
    )

src/module/announcement/ui/edit_choose_member.tsx

@@ -1,17 +1,16 @@
 "use client";
-import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA } from '@/module/_global';
 import { funGetGroupDivision } from '@/module/group/lib/api_group';
-import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
-import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
-import React, { useState } from 'react';
-import { FaCheck } from 'react-icons/fa';
-import { GroupData, GroupDataEditAnnouncement } from '../lib/type_announcement';
 import { useHookstate } from '@hookstate/core';
-import { globalMemberEditAnnouncement } from '../lib/val_announcement';
+import { ActionIcon, Box, Button, Divider, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
-import { FaMinus } from 'react-icons/fa6';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
 import toast from 'react-hot-toast';
-
+import { FaCheck } from 'react-icons/fa';
-
+import { FaMinus } from 'react-icons/fa6';
+import { HiChevronLeft } from 'react-icons/hi2';
+import { GroupData } from '../lib/type_announcement';
+import { globalMemberEditAnnouncement } from '../lib/val_announcement';
 
 interface CheckedState {
    [key: string]: string[];
@@ -111,7 +110,13 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
 
    return (
       <div>
-         <LayoutNavbarNew back="" title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
+         <LayoutNavbarNew state={
+            <Box>
+               <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
+                  <HiChevronLeft size={20} color='white' />
+               </ActionIcon>
+            </Box>
+         } title="Tambah Divisi Penerima Pengumuman" menu={<></>} />
          <Box p={20} pb={100}>
             <Group justify='flex-end' mb={20}>
                <Text

src/module/calender/ui/create_calender_division_caleder.tsx

@@ -1,11 +1,428 @@
-import { Box } from '@mantine/core';
+'use client'
-import React from 'react';
+import { LayoutNavbarNew, TEMA } from '@/module/_global';
-import NavbarCreateDivisionCalender from './navbar_create_division_calender';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+import { useHookstate } from '@hookstate/core';
+import { Avatar, Box, Button, Divider, Grid, Group, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
+import { DateInput, TimeInput } from '@mantine/dates';
+import { useMediaQuery } from '@mantine/hooks';
+import moment from 'moment';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { IoIosArrowDropright } from 'react-icons/io';
+import { funCreateCalender } from '../lib/api_calender';
+import { IFormMemberCalender } from '../lib/type_calender';
+import { globalCalender } from '../lib/val_calender';
+import CreateUserCalender from './create_user_calender';
 
 export default function CreateCalenderDivisionCaleder() {
+    const [value, setValue] = useState<Date | null>(null);
+    const router = useRouter()
+    const [isModal, setModal] = useState(false)
+    const [loadingModal, setLoadingModal] = useState(false)
+    const member = useHookstate(globalCalender)
+    const memberValue = member.get() as IFormMemberCalender[]
+    const [openMember, setOpenMember] = useState(false)
+    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,
+        timeStart: false,
+        timeEnd: false,
+        repeatEventTyper: false,
+        desc: false,
+        repeatValue: false
+    })
+    const [isData, setData] = useState({
+        idDivision: "",
+        title: "",
+        dateStart: "",
+        timeStart: "",
+        timeEnd: "",
+        linkMeet: "",
+        repeatEventTyper: "",
+        desc: "",
+        repeatValue: "1"
+    })
+
+    async function onSubmit(val: boolean) {
+        try {
+            setLoadingModal(true)
+            const response = await funCreateCalender({
+                idDivision: param.id,
+                title: isData.title,
+                dateStart: isData.dateStart,
+                timeStart: isData.timeStart,
+                timeEnd: isData.timeEnd,
+                linkMeet: isData.linkMeet,
+                repeatEventTyper: isData.repeatEventTyper,
+                desc: isData.desc,
+                repeatValue: isData.repeatValue,
+                member: memberValue
+            })
+
+            if (response.success) {
+                setModal(false)
+                router.push(`/division/${param.id}/calender`)
+                toast.success(response.message)
+                member.set([])
+            } else {
+                toast.error(response.message)
+                setModal(false)
+            }
+        } catch (error) {
+            console.error(error)
+            toast.error("Gagal menambahkan pengumuman, coba lagi nanti");
+        } finally {
+            setModal(false)
+            setLoadingModal(false)
+        }
+    }
+
+    function onCheck() {
+        const cek = checkAll()
+        if (!cek)
+            return false
+
+        if (memberValue.length == 0)
+            return toast.error("Error! silahkan pilih anggota")
+
+        setModal(true)
+    }
+
+    function checkAll() {
+        let nilai = true
+        if (isData.title === "") {
+            setTouched(touched => ({ ...touched, title: true }))
+            nilai = false
+        }
+        if (isData.dateStart === "") {
+            setTouched(touched => ({ ...touched, dateStart: true }))
+            nilai = false
+        }
+        if (isData.timeStart == "") {
+            setTouched(touched => ({ ...touched, timeStart: true }))
+            nilai = false
+        }
+        if (isData.timeEnd == "" || isData.timeStart > isData.timeEnd) {
+            setTouched(touched => ({ ...touched, timeEnd: true }))
+            nilai = false
+        }
+        if (isData.repeatEventTyper == "" || String(isData.repeatEventTyper) == "null") {
+            setTouched(touched => ({ ...touched, repeatEventTyper: true }))
+            nilai = false
+        }
+        if (isData.repeatValue === "" || Number(isData.repeatValue) <= 0) {
+            setTouched(touched => ({ ...touched, repeatValue: true }))
+            nilai = false
+        }
+
+        return nilai
+    }
+
+    function onValidation(kategori: string, val: any) {
+        if (kategori == 'title') {
+            setData({ ...isData, title: val })
+            if (val === "") {
+                setTouched({ ...touched, title: true })
+            } else {
+                setTouched({ ...touched, title: false })
+            }
+        } else if (kategori == 'dateStart') {
+            setValue(val)
+            setData({ ...isData, dateStart: moment(val).format("YYYY-MM-DD") })
+            if (val === "") {
+                setTouched({ ...touched, dateStart: true })
+            } else {
+                setTouched({ ...touched, dateStart: false })
+            }
+        } else if (kategori == 'timeStart') {
+            setData({ ...isData, timeStart: val })
+            if (val == "") {
+                setTouched({ ...touched, timeStart: true })
+            } else {
+                setTouched({ ...touched, timeStart: false })
+            }
+        } else if (kategori == 'timeEnd') {
+            setData({ ...isData, timeEnd: val })
+            if (val == "" || isData.timeStart > val) {
+                setTouched({ ...touched, timeEnd: true })
+            } else {
+                setTouched({ ...touched, timeEnd: false })
+            }
+        } else if (kategori == 'repeatEventTyper') {
+            setData(isData => ({ ...isData, repeatEventTyper: val }))
+            if (val == "once") {
+                setData(isData => ({ ...isData, repeatValue: "1" }))
+            }
+            if (val == "" || String(val) == "null") {
+                setTouched({ ...touched, repeatEventTyper: true })
+            } else {
+                setTouched({ ...touched, repeatEventTyper: false })
+            }
+        } else if (kategori == 'repeatValue') {
+            setData(isData => ({ ...isData, repeatValue: val, }))
+            if (val === "" || Number(val) <= 0) {
+                setTouched(touched => ({ ...touched, repeatValue: true }))
+            } else {
+                setTouched({ ...touched, repeatValue: false })
+            }
+        }
+    }
+
+    if (openMember) return <CreateUserCalender onClose={() => setOpenMember(false)} />
+
     return (
         <Box>
-            <NavbarCreateDivisionCalender />
+            <LayoutNavbarNew back={`/division/${param.id}/calender/`} title="Tambah Acara" menu />
+            <Box p={20}>
+                <Stack pb={100}>
+                    <TextInput
+                        required
+                        styles={{
+                            input: {
+                                border: `1px solid ${"#D6D8F6"}`,
+                                borderRadius: 10,
+                            },
+                        }}
+                        size="md"
+                        placeholder="Nama Acara"
+                        label="Nama Acara"
+                        value={isData.title}
+                        onChange={(event) => { onValidation('title', event.target.value) }}
+                        error={
+                            touched.title && (
+                                isData.title == "" ? "Nama Acara Tidak Boleh Kosong" : null
+                            )
+                        }
+                    />
+                    <DateInput
+                        required
+                        styles={{
+                            input: {
+                                border: `1px solid ${"#D6D8F6"}`,
+                                borderRadius: 10,
+                            },
+                        }}
+                        size="md"
+                        value={value}
+                        onChange={(val) => { onValidation('dateStart', val) }}
+                        placeholder="Input Tanggal"
+                        label="Tanggal"
+                        error={
+                            touched.dateStart && (
+                                isData.dateStart == "" ? "Tanggal Tidak Boleh Kosong" : null
+                            )
+                        }
+                    />
+                    <SimpleGrid
+                        cols={{ base: 2, sm: 2, lg: 2 }}
+                    >
+                        <TimeInput
+                            required
+                            styles={{
+                                input: {
+                                    border: `1px solid ${"#D6D8F6"}`,
+                                    borderRadius: 10,
+                                },
+                            }}
+                            size="md"
+                            label="Waktu Awal"
+                            value={isData.timeStart}
+                            onChange={(event) => onValidation('timeStart', event.target.value)}
+                            error={
+                                touched.timeStart && (
+                                    isData.timeStart == "" ? "Waktu Awal Tidak Boleh Kosong" : null
+                                )
+                            }
+                        />
+                        <TimeInput
+                            required
+                            styles={{
+                                input: {
+                                    border: `1px solid ${"#D6D8F6"}`,
+                                    borderRadius: 10,
+                                },
+                            }}
+                            size="md"
+                            label="Waktu Akhir"
+                            value={isData.timeEnd}
+                            onChange={(event) => onValidation('timeEnd', event.target.value)}
+                            error={
+                                touched.timeEnd && (
+                                    isData.timeEnd == "" ? "Waktu Akhir Tidak Boleh Kosong" : null
+                                ) ||
+                                (isData.timeStart > isData.timeEnd ? "Waktu Akhir Tidak Tepat" : null)
+                            }
+                        />
+                    </SimpleGrid>
+                    <TextInput
+                        styles={{
+                            input: {
+                                border: `1px solid ${"#D6D8F6"}`,
+                                borderRadius: 10,
+                            },
+                        }}
+                        size="md"
+                        placeholder="Link Meet"
+                        label="Link Meet"
+                        value={isData.linkMeet}
+                        onChange={(event) => setData({ ...isData, linkMeet: event.target.value })}
+                    />
+                    <Select
+                        required
+                        styles={{
+                            input: {
+                                border: `1px solid ${"#D6D8F6"}`,
+                                borderRadius: 10,
+                            },
+                        }}
+                        size="md"
+                        placeholder="Ulangi Acara"
+                        label="Ulangi Acara"
+                        data={[
+                            { value: 'once', label: 'Acara 1 Kali' },
+                            { value: 'daily', label: 'Setiap Hari' },
+                            { value: 'weekly', label: 'Mingguan' },
+                            { value: 'monthly', label: 'Bulanan' },
+                            { value: 'yearly', label: 'Tahunan' },
+                        ]}
+                        value={isData.repeatEventTyper}
+                        onChange={(val: any) => { onValidation('repeatEventTyper', val) }}
+                        error={
+                            touched.repeatEventTyper && (
+                                isData.repeatEventTyper == "" || String(isData.repeatEventTyper) == "null" ? "Ulangi Acara Tidak Boleh Kosong" : null
+                            )
+                        }
+                    />
+                    <TextInput styles={{
+                        input: {
+                            border: `1px solid ${"#D6D8F6"}`,
+                            borderRadius: 10,
+                        },
+                    }}
+                        type='number'
+                        required
+                        label="Jumlah pengulangan"
+                        size="md"
+                        placeholder='Jumlah pengulangan'
+                        value={isData.repeatValue}
+                        min={1}
+                        disabled={(isData.repeatEventTyper == "once") ? true : false}
+                        onChange={(event) => { onValidation('repeatValue', event.currentTarget.value) }}
+                        error={
+                            touched.repeatValue && (
+                                isData.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" :
+                                    Number(isData.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh di bawah 1" : ""
+                            )
+                        }
+                    />
+                    <Textarea styles={{
+                        input: {
+                            border: `1px solid ${"#D6D8F6"}`,
+                            borderRadius: 10,
+                        },
+                    }}
+                        value={isData.desc}
+                        size="md" placeholder='Deskripsi' label="Deskripsi"
+                        onChange={(event) => setData({ ...isData, desc: event.target.value })}
+                    />
+                    <Box mt={5} onClick={() => setOpenMember(true)}>
+                        <Group
+                            justify="space-between"
+                            p={10}
+                            style={{
+                                border: `1px solid ${"#D6D8F6"}`,
+                                borderRadius: 10,
+                            }}
+                        >
+                            <Text>Tambah Anggota</Text>
+                            <IoIosArrowDropright size={25} />
+                        </Group>
+                    </Box>
+                    {
+                        member.length > 0 &&
+                        <Box pt={30} mb={60}>
+                            <Group justify="space-between">
+                                <Text c={tema.get().utama}>Anggota Terpilih</Text>
+                                <Text c={tema.get().utama}>Total {member.length} Anggota</Text>
+                            </Group>
+                            <Box pt={10}>
+                                <Box mb={20}>
+                                    <Box
+                                        style={{
+                                            border: `1px solid ${"#C7D6E8"}`,
+                                            borderRadius: 10,
+                                        }}
+                                        px={20}
+                                        py={10}
+                                    >
+                                        {member.length == 0 ?
+                                            <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '10vh' }}>
+                                                <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Anggota</Text>
+                                            </Box>
+                                            :
+
+                                            member.get().map((v: any, i: any) => {
+                                                return (
+                                                    <Box key={i}>
+                                                        <Grid align='center' mt={10}
+                                                        >
+                                                            <Grid.Col span={1}>
+                                                                <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
+                                                            </Grid.Col>
+                                                            <Grid.Col span={8}>
+                                                                <Text c={tema.get().utama} fw={"bold"} lineClamp={1} pl={isMobile2 ? 40 : 30} fz={isMobile ? 14 : 16} >
+                                                                    {v.name}
+                                                                </Text>
+                                                            </Grid.Col>
+                                                            <Grid.Col span={3}>
+                                                                <Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
+                                                                    Anggota
+                                                                </Text>
+                                                            </Grid.Col>
+                                                        </Grid>
+                                                        <Box mt={10}>
+                                                            <Divider size={"xs"} />
+                                                        </Box>
+                                                    </Box>
+                                                );
+                                            })}
+                                    </Box>
+                                </Box>
+                            </Box>
+                        </Box>
+                    }
+                </Stack>
+            </Box>
+            <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+                maxWidth: rem(550),
+                zIndex: 999,
+                backgroundColor: `${tema.get().bgUtama}`,
+            }}>
+                <Button
+                    c={"white"}
+                    bg={tema.get().utama}
+                    size="lg"
+                    radius={30}
+                    fullWidth
+                    onClick={() => { onCheck() }}
+                >
+                    Simpan
+                </Button>
+            </Box>
+            <LayoutModal loading={loadingModal} opened={isModal} onClose={() => setModal(false)}
+                description="Apakah Anda yakin ingin menambahkan data?"
+                onYes={(val) => {
+                    if (val) {
+                        onSubmit(val)
+                    } else {
+                        setModal(false)
+                    }
+                }} />
         </Box>
     );
 } 

src/module/calender/ui/update_division_calender.tsx

@@ -1,21 +1,22 @@
 "use client"
 import { LayoutNavbarNew, TEMA } from '@/module/_global';
-import { Box, Button, Group, rem, Select, SimpleGrid, Skeleton, Stack, Text, Textarea, TextInput } from '@mantine/core';
-import { DateInput, TimeInput } from '@mantine/dates';
-import React, { useState } from 'react';
-import { useParams, useRouter } from 'next/navigation';
 import LayoutModal from '@/module/_global/layout/layout_modal';
-import toast from 'react-hot-toast';
+import { useHookstate } from '@hookstate/core';
-import { funEditCalenderById, funGetOneCalender, funGetOneCalenderByIdCalendar, } from '../lib/api_calender';
+import { Box, Button, Group, rem, Select, SimpleGrid, Skeleton, Stack, Textarea, TextInput } from '@mantine/core';
+import { DateInput, TimeInput } from '@mantine/dates';
 import { useShallowEffect } from '@mantine/hooks';
-import { IDetailByIdCalender } from '../lib/type_calender';
 import moment from 'moment';
 import "moment/locale/id";
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { funEditCalenderById, funGetOneCalenderByIdCalendar } from '../lib/api_calender';
+import { IDetailByIdCalender } from '../lib/type_calender';
 import UpdateListUsers from './update_list_users';
-import { useHookstate } from '@hookstate/core';
 
 export default function UpdateDivisionCalender() {
   const [isModal, setModal] = useState(false)
+  const [loadingModal, setLoadingModal] = useState(false)
   const param = useParams<{ id: string, detail: string }>()
   const [isDataCalender, setDataCalender] = useState<IDetailByIdCalender>()
   const [openMember, setOpenMember] = useState(false)
@@ -54,35 +55,89 @@ export default function UpdateDivisionCalender() {
 
   const [value, setValue] = useState<Date | null>(null);
   const router = useRouter()
-  async function onSubmit(val: boolean) {
-    try {
-      if (val) {
-        const response = await funEditCalenderById(param.detail, {
-          title: isDataCalender?.title,
-          dateStart: isDataCalender?.dateStart,
-          timeStart: isDataCalender?.timeStart,
-          timeEnd: isDataCalender?.timeEnd,
-          linkMeet: isDataCalender?.linkMeet,
-          repeatEventTyper: isDataCalender?.repeatEventTyper,
-          desc: isDataCalender?.desc,
-          repeatValue: isDataCalender?.repeatValue
-        })
 
-        if (response.success) {
+  function onCheck() {
-          setModal(false)
+    if (Object.values(touched).some((v) => v == true))
-          router.push(`/division/${param.id}/calender`)
+      return false
-          toast.success(response.message)
+    setModal(true)
-        } else {
+  }
-          toast.error(response.message)
+
-        }
+  async function onSubmit() {
+    try {
+      setLoadingModal(true)
+      const response = await funEditCalenderById(param.detail, {
+        title: isDataCalender?.title,
+        dateStart: isDataCalender?.dateStart,
+        timeStart: isDataCalender?.timeStart,
+        timeEnd: isDataCalender?.timeEnd,
+        linkMeet: isDataCalender?.linkMeet,
+        repeatEventTyper: isDataCalender?.repeatEventTyper,
+        desc: isDataCalender?.desc,
+        repeatValue: isDataCalender?.repeatValue
+      })
+
+      if (response.success) {
+        router.push(`/division/${param.id}/calender`)
+        toast.success(response.message)
+      } else {
+        toast.error(response.message)
       }
-      setModal(false)
     } catch (error) {
       console.error(error)
       toast.error("Terjadi kesalahan! Silahkan coba kembali");
-      setModal(false)
     } finally {
       setModal(false)
+      setLoadingModal(false)
+    }
+  }
+
+  function onValidation(kategori: string, val: any) {
+    if (kategori == 'title') {
+      setDataCalender({ ...isDataCalender, title: val })
+      if (val === "") {
+        setTouched({ ...touched, title: true })
+      } else {
+        setTouched({ ...touched, title: false })
+      }
+    } else if (kategori == 'dateStart') {
+      setValue(val)
+      setDataCalender({ ...isDataCalender, dateStart: moment(val).format("YYYY-MM-DD") })
+      if (val === "") {
+        setTouched({ ...touched, dateStart: true })
+      } else {
+        setTouched({ ...touched, dateStart: false })
+      }
+    } else if (kategori == 'timeStart') {
+      setDataCalender({ ...isDataCalender, timeStart: val })
+      if (val == "") {
+        setTouched({ ...touched, timeStart: true })
+      } else {
+        setTouched({ ...touched, timeStart: false })
+      }
+    } else if (kategori == 'timeEnd') {
+      setDataCalender({ ...isDataCalender, timeEnd: val })
+      if (val == "" || String(isDataCalender?.timeStart) > String(val)) {
+        setTouched({ ...touched, timeEnd: true })
+      } else {
+        setTouched({ ...touched, timeEnd: false })
+      }
+    } else if (kategori == 'repeatEventTyper') {
+      setDataCalender(isDataCalender => ({ ...isDataCalender, repeatEventTyper: val }))
+      if (val == "once") {
+        setDataCalender(isDataCalender => ({ ...isDataCalender, repeatValue: "1" }))
+      }
+      if (val == "" || String(val) == "null") {
+        setTouched({ ...touched, repeatEventTyper: true })
+      } else {
+        setTouched({ ...touched, repeatEventTyper: false })
+      }
+    } else if (kategori == 'repeatValue') {
+      setDataCalender(isDataCalender => ({ ...isDataCalender, repeatValue: val, }))
+      if (val === "" || Number(val) <= 0) {
+        setTouched(touched => ({ ...touched, repeatValue: true }))
+      } else {
+        setTouched({ ...touched, repeatValue: false })
+      }
     }
   }
 
@@ -117,16 +172,7 @@ export default function UpdateDivisionCalender() {
                 placeholder="Acara"
                 label="Acara"
                 defaultValue={isDataCalender?.title}
-                onChange={
+                onChange={(event) => { onValidation('title', event.target.value) }}
-                  (event) => {
-                    setDataCalender({
-                      ...isDataCalender,
-                      title: event.target.value
-                    })
-                    setTouched({ ...touched, title: false })
-                  }
-                }
-                onBlur={() => setTouched({ ...touched, title: true })}
                 required
                 error={
                   touched.title && (
@@ -145,20 +191,10 @@ export default function UpdateDivisionCalender() {
                 value={
                   (isDataCalender?.dateStart == '' || isDataCalender?.dateStart == null) ? null : new Date(isDataCalender.dateStart)
                 }
-                onChange={
+                onChange={(val) => { onValidation('dateStart', val) }}
-                  (val) => {
-                    setValue(val);
-                    setDataCalender({
-                      ...isDataCalender,
-                      dateStart: moment(val).format("YYYY-MM-DD")
-                    })
-                    setTouched({ ...touched, dateStart: false })
-                  }
-                }
                 placeholder="Input Tanggal"
                 label="Tanggal"
                 minDate={new Date()}
-                onBlur={() => setTouched({ ...touched, dateStart: true })}
                 error={
                   touched.dateStart && (
                     isDataCalender?.dateStart == "" ? "Tanggal Tidak Boleh Kosong" : null
@@ -178,17 +214,8 @@ export default function UpdateDivisionCalender() {
                   }}
                   size="md"
                   label="Waktu Awal"
-                  // value={isDataCalender?.timeStart}
                   defaultValue={isDataCalender?.timeStart}
-                  onChange={
+                  onChange={(event) => { onValidation('timeStart', event.target.value) }}
-                    (event) => {
-                      setDataCalender({
-                        ...isDataCalender,
-                        timeStart: event.target.value
-                      })
-                    }
-                  }
-                  onBlur={() => setTouched({ ...touched, timeStart: true })}
                   error={touched.timeStart && !isDataCalender?.timeStart ? "Waktu Awal Tidak Boleh Kosong" : null}
                   required
                 />
@@ -201,17 +228,8 @@ export default function UpdateDivisionCalender() {
                   }}
                   size="md"
                   label="Waktu Akhir"
-                  // value={isDataCalender?.timeEnd}
                   defaultValue={isDataCalender?.timeEnd}
-                  onChange={
+                  onChange={(event) => { onValidation('timeEnd', event.target.value) }}
-                    (event) => {
-                      setDataCalender({
-                        ...isDataCalender,
-                        timeEnd: event.target.value
-                      })
-                    }
-                  }
-                  onBlur={() => setTouched({ ...touched, timeEnd: true })}
                   required
                   error={
                     touched.timeEnd && (
@@ -232,14 +250,7 @@ export default function UpdateDivisionCalender() {
                 placeholder="Link Meet"
                 label="Link Meet"
                 defaultValue={isDataCalender?.linkMeet}
-                onChange={
+                onChange={(event) => { setDataCalender({ ...isDataCalender, linkMeet: event.target.value }) }}
-                  (event) => {
-                    setDataCalender({
-                      ...isDataCalender,
-                      linkMeet: event.target.value
-                    })
-                  }
-                }
               />
               <Select
                 styles={{
@@ -260,76 +271,36 @@ export default function UpdateDivisionCalender() {
                 ]}
                 value={isDataCalender?.repeatEventTyper}
                 defaultValue={isDataCalender?.repeatEventTyper}
-                onChange={
+                onChange={(val: any) => { onValidation('repeatEventTyper', val) }}
-                  (val: any) => {
-                    setDataCalender({
-                      ...isDataCalender,
-                      repeatEventTyper: val
-                    })
-                    setTouched({ ...touched, repeatEventTyper: false })
-                  }
-                }
-                onBlur={() => setTouched({ ...touched, repeatEventTyper: true })}
                 error={
                   touched.repeatEventTyper && (
-                    isDataCalender?.repeatEventTyper == "" ? "Ulangi Acara Tidak Boleh Kosong" : null
+                    isDataCalender?.repeatEventTyper == "" || String(isDataCalender?.repeatEventTyper) == "null" ? "Ulangi Acara Tidak Boleh Kosong" : null
                   )
                 }
                 required
               />
-              {isDataCalender?.repeatEventTyper == "once" ?
+              <TextInput styles={{
-                <TextInput styles={{
+                input: {
-                  input: {
+                  border: `1px solid ${"#D6D8F6"}`,
-                    border: `1px solid ${"#D6D8F6"}`,
+                  borderRadius: 10,
-                    borderRadius: 10,
+                },
-                  },
+              }}
-                }}
+                type='number'
-                  type='number'
+                required
-                  required
+                label="Jumlah pengulangan"
-                  label="Jumlah pengulangan"
+                size="md"
-                  size="md"
+                min={1}
-                  disabled
+                disabled={(isDataCalender?.repeatEventTyper == "once") ? true : false}
-                  placeholder='Jumlah pengulangan'
+                placeholder='Jumlah pengulangan'
-                  defaultValue={"1"}
+                defaultValue={isDataCalender?.repeatValue}
-                  onChange={(event) => {
+                onChange={(event) => { onValidation('repeatValue', event.currentTarget.value) }}
-                    setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) })
+                error={
-                    setTouched({ ...touched, repeatValue: false })
+                  touched.repeatValue && (
-                  }}
+                    isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" :
-                  onBlur={() => setTouched({ ...touched, repeatValue: true })}
+                      Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh di bawah 1" : ""
-                  error={
+                  )
-                    touched.repeatValue && (
+                }
-                      isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : null
+              />
-                      // || Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh dibawah 1" : null
-                    )
-                  }
-                />
-                :
-                <TextInput styles={{
-                  input: {
-                    border: `1px solid ${"#D6D8F6"}`,
-                    borderRadius: 10,
-                  },
-                }}
-                  type='number'
-                  required
-                  label="Jumlah pengulangan"
-                  size="md"
-                  min={1}
-                  placeholder='Jumlah pengulangan'
-                  defaultValue={isDataCalender?.repeatValue}
-                  onChange={(event) => {
-                    setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) })
-                    setTouched({ ...touched, repeatValue: false })
-                  }}
-                  onBlur={() => setTouched({ ...touched, repeatValue: true })}
-                  error={
-                    touched.repeatValue && (
-                      isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" :
-                        Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh di bawah 1" : ""
-                    )
-                  }
-                />
-              }
               <Textarea styles={{
                 input: {
                   border: `1px solid ${"#D6D8F6"}`,
@@ -365,15 +336,21 @@ export default function UpdateDivisionCalender() {
             size="lg"
             radius={30}
             fullWidth
-            onClick={() => setModal(true)}
+            onClick={() => onCheck()}
           >
             Simpan
           </Button>
         }
       </Box>
-      <LayoutModal opened={isModal} onClose={() => setModal(false)}
+      <LayoutModal loading={loadingModal} opened={isModal} onClose={() => setModal(false)}
         description="Apakah Anda yakin ingin mengubah data acara ini? Data ini akan mempengaruhi semua data yang terkait"
-        onYes={(val) => { onSubmit(val) }} />
+        onYes={(val) => {
+          if (val) {
+            onSubmit()
+          } else {
+            setModal(false)
+          }
+        }} />
     </Box>
   );
 }

src/module/division_new/ui/create_division.tsx

@@ -1,29 +1,15 @@
 "use client";
 import { LayoutNavbarNew, TEMA } from "@/module/_global";
-import { useHookstate } from "@hookstate/core";
-import {
-    Avatar,
-    Box,
-    Button,
-    Divider,
-    Flex,
-    Grid,
-    Group,
-    rem,
-    Select,
-    Stack,
-    Text,
-    Textarea,
-    TextInput,
-} from "@mantine/core";
-import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
-import { useRouter } from "next/navigation";
-import React, { useState } from "react";
-import { IoIosArrowDropright } from "react-icons/io";
-import { globalMemberDivision } from "../lib/val_division";
-import toast from "react-hot-toast";
 import { funGetUserByCookies } from "@/module/auth";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
+import { useHookstate } from "@hookstate/core";
+import { Avatar, Box, Button, Divider, Grid, Group, rem, Select, Stack, Text, Textarea, TextInput } from "@mantine/core";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { IoIosArrowDropright } from "react-icons/io";
+import { globalMemberDivision } from "../lib/val_division";
 import NavbarAdminDivision from "./navbar_admin_division";
 import NavbarCreateUsers from "./navbar_create_users";
 
@@ -58,23 +44,14 @@ export default function CreateDivision() {
         setRoleUser(loadUser.idUserRole)
     }
 
-    function onSubmit() {
+    function onCheck() {
-        if (roleUser == "supadmin" && (body.idGroup == "" || body.idGroup == null)) {
+        const cek = checkAll()
-            return toast.error("Error! grup harus diisi")
+        if (!cek)
-        }
+            return false
-
+        if (member.length == 0)
-        if (body.name == "") {
-            return toast.error("Error! nama divisi harus diisi")
-        }
-
-        if (member.length == 0) {
             return toast.error("Error! belum ada anggota yang terdaftar")
-        }
-
-
 
         setChooseAdmin(true)
-
     }
 
     function onToChooseAnggota() {
@@ -86,7 +63,7 @@ export default function CreateDivision() {
 
     function onChooseGroup(val: any) {
         member.set([])
-        setBody({ ...body, idGroup: val })
+        onValidation('idGroup', val)
     }
 
 
@@ -95,6 +72,39 @@ export default function CreateDivision() {
         loadData();
     }, []);
 
+    function onValidation(kategori: string, val: any) {
+        if (kategori == 'name') {
+            setBody({ ...body, name: val })
+            if (val === "") {
+                setTouched({ ...touched, name: true })
+            } else {
+                setTouched({ ...touched, name: false })
+            }
+        } else if (kategori == 'idGroup') {
+            setBody({ ...body, idGroup: val, })
+            if (val === "" || String(val) == "null") {
+                setTouched(touched => ({ ...touched, idGroup: true }))
+            } else {
+                setTouched({ ...touched, idGroup: false })
+            }
+        } else if (kategori == 'desc') {
+            setBody({ ...body, desc: val })
+        }
+    }
+
+    function checkAll() {
+        let nilai = true
+        if (roleUser == "supadmin" && (body.idGroup === "" || String(body.idGroup) == "null")) {
+            setTouched(touched => ({ ...touched, idGroup: true }))
+            nilai = false
+        }
+        if (body.name === "") {
+            setTouched(touched => ({ ...touched, name: true }))
+            nilai = false
+        }
+        return nilai
+    }
+
 
 
     if (isChooseAdmin) return <NavbarAdminDivision data={body} onSuccess={(val) => {
@@ -133,10 +143,9 @@ export default function CreateDivision() {
                                 onChange={(val) => {
                                     onChooseGroup(val)
                                 }}
-                                onBlur={() => setTouched({ ...touched, idGroup: true })}
                                 error={
                                     touched.idGroup && (
-                                        body.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
+                                        body.idGroup == "" || String(body.idGroup) == "null" ? "Grup Tidak Boleh Kosong" : null
                                     )
                                 }
                                 value={body.idGroup}
@@ -150,11 +159,10 @@ export default function CreateDivision() {
                         required
                         radius={10}
                         value={body.name}
-                        onChange={(val) => { setBody({ ...body, name: val.target.value }) }}
+                        onChange={(val) => { onValidation('name', val.target.value) }}
-                        onBlur={() => setTouched({ ...touched, name: true })}
                         error={
                             touched.name && (
-                                body.name == "" ? "Nama Tidak Boleh Kosong" : null
+                                body.name == "" ? "Nama Divisi Tidak Boleh Kosong" : null
                             )
                         }
                     />
@@ -230,16 +238,7 @@ export default function CreateDivision() {
                 zIndex: 999,
                 backgroundColor: `${tema.get().bgUtama}`,
             }}>
-                <Button
+                <Button color="white" bg={tema.get().utama} size="lg" radius={30} fullWidth onClick={() => { onCheck() }} >
-                    color="white"
-                    bg={tema.get().utama}
-                    size="lg"
-                    radius={30}
-                    fullWidth
-                    onClick={() => {
-                        onSubmit()
-                    }}
-                >
                     Simpan
                 </Button>
             </Box>

src/module/division_new/ui/edit_division.tsx

@@ -1,25 +1,22 @@
 "use client"
 import { LayoutNavbarNew, TEMA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
-import { Box, Button, rem, Select, Skeleton, Stack, Textarea, TextInput } from '@mantine/core';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, rem, Skeleton, Stack, Textarea, TextInput } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useParams, useRouter } from 'next/navigation';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { funEditDivision, funGetDivisionById } from '../lib/api_division';
-import { funGetAllGroup, IDataGroup } from '@/module/group';
-import { funGetUserByCookies } from '@/module/auth';
-import { useHookstate } from '@hookstate/core';
-
 
 export default function EditDivision() {
   const [openModal, setOpenModal] = useState(false)
   const router = useRouter()
   const param = useParams<{ id: string }>()
   const tema = useHookstate(TEMA)
+  const [loadingModal, setLoadingModal] = useState(false)
   const [loading, setLoading] = useState(false)
   const [body, setBody] = useState<any>({
-    idGroup: "",
     name: "",
     desc: "",
   });
@@ -28,6 +25,36 @@ export default function EditDivision() {
     name: false,
   });
 
+  function onValidation(kategori: string, val: any) {
+    if (kategori == 'name') {
+      setBody({ ...body, name: val })
+      if (val === "") {
+        setTouched({ ...touched, name: true })
+      } else {
+        setTouched({ ...touched, name: false })
+      }
+    } else if (kategori == "desc") {
+      setBody({ ...body, desc: val })
+    }
+  }
+
+  function onCheck() {
+    const cek = checkAll()
+    if (!cek)
+      return false
+    setOpenModal(true)
+  }
+
+  function checkAll() {
+    let nilai = true
+    if (body.name === "") {
+      setTouched(touched => ({ ...touched, name: true }))
+      nilai = false
+    }
+    return nilai
+  }
+
+
 
   async function getOneData() {
     try {
@@ -56,17 +83,19 @@ export default function EditDivision() {
 
   async function onUpdate() {
     try {
+      setLoadingModal(true)
       const res = await funEditDivision(param.id, body)
       if (res.success) {
         toast.success(res.message)
       } else {
         toast.error(res.message)
       }
-      setOpenModal(false)
     } catch (error) {
       console.error(error)
-      setOpenModal(false)
       toast.error("Gagal mengedit divisi, coba lagi nanti");
+    } finally {
+      setLoadingModal(false)
+      setOpenModal(false)
     }
 
   }
@@ -88,26 +117,22 @@ export default function EditDivision() {
             :
             <>
               <TextInput
-                placeholder="Judul"
+                placeholder="Nama Divisi"
-                label="Judul"
+                label="Nama Divisi"
                 size="md"
                 required
-                radius={40}
+                radius={10}
                 value={body.name}
-                onChange={(e) => {
+                onChange={(e) => { onValidation('name', e.currentTarget.value) }}
-                  setBody({ ...body, name: e.target.value })
-                  setTouched({ ...touched, name: false })
-                }}
-                onBlur={() => setTouched({ ...touched, name: true })}
                 error={
                   touched.name && (
-                    body.name == "" ? "Judul Tidak Boleh Kosong" : null
+                    body.name == "" ? "Nama Divisi Tidak Boleh Kosong" : null
                   )
                 }
               />
               <Textarea placeholder="Deskripsi" label="Deskripsi" size="md" radius={10}
                 value={body.desc}
-                onChange={(e) => { setBody({ ...body, desc: e.currentTarget.value }) }}
+                onChange={(e) => { onValidation('desc', e.currentTarget.value) }}
                 styles={{
                   input: {
                     height: "40vh"
@@ -132,21 +157,13 @@ export default function EditDivision() {
             size="lg"
             radius={30}
             fullWidth
-            onClick={() => {
+            onClick={() => { onCheck() }}
-              if (
-                body.name !== ""
-              ) {
-                setOpenModal(true)
-              } else {
-                toast.error("Judul Tidak Boleh Kosong")
-              }
-            }}
           >
             Simpan
           </Button>
         }
       </Box>
-      <LayoutModal opened={openModal} onClose={() => setOpenModal(false)} description='Apakah Anda yakin ingin edit data'
+      <LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)} description='Apakah Anda yakin ingin edit data'
         onYes={(val) => {
           if (val) {
             onUpdate()

src/module/division_new/ui/information_division.tsx

@@ -135,9 +135,9 @@ export default function InformationDivision() {
                     </Stack>
                   ))
                 :
-                (deskripsi != null && deskripsi != undefined) ?
+                (deskripsi != null && deskripsi != undefined && deskripsi != "") ?
                   <Text ta={"justify"}>{deskripsi}</Text>
-                  : <></>
+                  : <Text ta={"center"} c={"dimmed"} fs={"italic"}>Tidak ada deskripsi</Text>
             }
           </Box>
         </Box>
@@ -195,12 +195,12 @@ export default function InformationDivision() {
                           }}
                         >
                           <Grid.Col span={1}>
-                              <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={'lg'} />
                           </Grid.Col>
                           <Grid.Col span={8}>
-                                <Text c={tema.get().utama} fw={"bold"} truncate="end" pl={isMobile2 ? 40 : 30} fz={isMobile ? 14 : 16}>
+                            <Text c={tema.get().utama} fw={"bold"} truncate="end" pl={isMobile2 ? 40 : 30} fz={isMobile ? 14 : 16}>
-                                  {v.name}
+                              {v.name}
-                                </Text>
+                            </Text>
                           </Grid.Col>
                           <Grid.Col span={3}>
                             <Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>

src/module/project/ui/create_project.tsx

@@ -24,7 +24,6 @@ import ResultsFile from "./results_file";
 
 export default function CreateProject() {
   const router = useRouter();
-  const [openDrawer, setOpenDrawer] = useState(false)
   const [openDrawerFile, setOpenDrawerFile] = useState(false)
   const [openDrawerTask, setOpenDrawerTask] = useState(false)
   const [isModal, setModal] = useState(false)
@@ -51,13 +50,12 @@ export default function CreateProject() {
   const [touched, setTouched] = useState({
     title: false,
     idGroup: false,
-    desc: false
   });
 
   const [data, setDataRealtime] = useWibuRealtime({
     WIBU_REALTIME_TOKEN: keyWibu,
     project: "sdm"
- })
+  })
 
   function deleteFile(index: number) {
     setListFile([...listFile.filter((val, i) => i !== index)])
@@ -93,7 +91,7 @@ export default function CreateProject() {
 
   function onChooseGroup(val: any) {
     member.set([])
-    setBody({ ...body, idGroup: val })
+    onValidation('idGroup', val)
   }
 
   useShallowEffect(() => {
@@ -138,6 +136,51 @@ export default function CreateProject() {
     }
   }
 
+  function onCheck() {
+    const cek = checkAll()
+    if (!cek)
+      return false
+
+    if (dataTask.length == 0)
+      return toast.error("Error! silahkan tambahkan tugas")
+
+    if (memberValue.length == 0)
+      return toast.error("Error! silahkan pilih anggota")
+
+    setModal(true)
+  }
+
+  function checkAll() {
+    let nilai = true
+    if (body.idGroup === "" || String(body.idGroup) == "null") {
+      setTouched(touched => ({ ...touched, idGroup: true }))
+      nilai = false
+    }
+    if (body.title === "") {
+      setTouched(touched => ({ ...touched, title: true }))
+      nilai = false
+    }
+    return nilai
+  }
+
+  function onValidation(kategori: string, val: string) {
+    if (kategori == 'idGroup') {
+      setBody({ ...body, idGroup: val })
+      if (val === "" || String(val) == "null") {
+        setTouched({ ...touched, idGroup: true })
+      } else {
+        setTouched({ ...touched, idGroup: false })
+      }
+    } else if (kategori == 'title') {
+      setBody({ ...body, title: val })
+      if (val === "") {
+        setTouched({ ...touched, title: true })
+      } else {
+        setTouched({ ...touched, title: false })
+      }
+    }
+  }
+
 
 
   if (openTugas) return <ViewDateEndTask onClose={(val) => { setOpenTugas(false) }} onSet={(val) => { setDataTask([...dataTask, val]); setOpenTugas(false) }} />;
@@ -169,14 +212,12 @@ export default function CreateProject() {
                 }))}
                 onChange={(val) => {
                   onChooseGroup(val)
-                  setTouched({ ...touched, idGroup: false })
                 }}
 
                 value={(body.idGroup == "") ? null : body.idGroup}
-                onBlur={() => setTouched({ ...touched, idGroup: true })}
                 error={
                   touched.idGroup && (
-                    body.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
+                    body.idGroup == "" || String(body.idGroup) == "null" ? "Grup Tidak Boleh Kosong" : null
                   )
                 }
               />
@@ -195,11 +236,7 @@ export default function CreateProject() {
             placeholder="Nama Kegiatan"
             size="md"
             value={body.title}
-            onChange={(e) => {
+            onChange={(e) => { onValidation('title', e.target.value) }}
-              setBody({ ...body, title: e.target.value })
-              setTouched({ ...touched, title: false })
-            }}
-            onBlur={() => setTouched({ ...touched, title: true })}
             error={
               touched.title && (
                 body.title == "" ? "Kegiatan Tidak Boleh Kosong" : null
@@ -361,16 +398,7 @@ export default function CreateProject() {
           size="lg"
           radius={30}
           fullWidth
-          onClick={() => {
+          onClick={() => { onCheck() }}>
-            if (
-              body.title !== "" &&
-              body.idGroup !== ""
-            ) {
-              setModal(true)
-            } else {
-              toast.error("Mohon lengkapi data terlebih dahulu");
-            }
-          }}>
           Simpan
         </Button>
       </Box>
@@ -504,7 +532,7 @@ export default function CreateProject() {
         onYes={(val) => {
           if (val) {
             onSubmit()
-          }else{
+          } else {
             setModal(false)
           }
 

src/module/project/ui/edit_task_project.tsx

@@ -1,13 +1,13 @@
 "use client"
-import { useParams, useRouter } from 'next/navigation';
+import { LayoutNavbarNew, TEMA } from '@/module/_global';
-import React, { useState } from 'react';
-import toast from 'react-hot-toast';
-import { funEditProject, funGetOneProjectById } from '../lib/api_project';
-import { useShallowEffect } from '@mantine/hooks';
-import { Box, Button, Input, rem, Skeleton, Stack, TextInput } from '@mantine/core';
-import { LayoutNavbarNew, TEMA} from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
+import { Box, Button, rem, Skeleton, Stack, TextInput } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { funEditProject, funGetOneProjectById } from '../lib/api_project';
 
 export default function EditTaskProject() {
   const router = useRouter()
@@ -20,13 +20,6 @@ export default function EditTaskProject() {
     name: false,
   });
 
-  function onVerification() {
-    if (name == "")
-      return toast.error("Error! harus memasukkan judul Kegiatan")
-
-    setOpenModal(true)
-  }
-
   async function onSubmit() {
     try {
       const res = await funEditProject(param.id, { name })
@@ -42,6 +35,27 @@ export default function EditTaskProject() {
     }
   }
 
+  function onCheck() {
+    if (name == "") {
+      setTouched({ ...touched, name: true })
+      return false
+    }
+    setOpenModal(true)
+  }
+
+
+
+  function onValidation(kategori: string, val: string) {
+    if (kategori == 'title') {
+      setName(val)
+      if (val === "") {
+        setTouched({ ...touched, name: true })
+      } else {
+        setTouched({ ...touched, name: false })
+      }
+    }
+  }
+
   async function getOneData() {
     try {
       setLoading(true)
@@ -70,31 +84,27 @@ export default function EditTaskProject() {
       <Box p={20}>
         <Stack pt={15}>
           {loading ?
-             <Skeleton height={40} mt={20} radius={10} />
+            <Skeleton height={40} mt={20} radius={10} />
             :
-          <TextInput
+            <TextInput
-            styles={{
+              styles={{
-              input: {
+                input: {
-                border: `1px solid ${"#D6D8F6"}`,
+                  border: `1px solid ${"#D6D8F6"}`,
-                borderRadius: 10,
+                  borderRadius: 10,
-              },
+                },
-            }}
+              }}
-            placeholder="Input Kegiatan"
+              placeholder="Nama Kegiatan"
-            label="Judul Kegiatan"
+              label="Kegiatan"
-            required
+              required
-            size="md"
+              size="md"
-            value={name}
+              value={name}
-            onChange={(e) => {
+              onChange={(e) => { onValidation('title', e.target.value) }}
-              setName(e.target.value)
+              error={
-              setTouched({ ...touched, name: false })
+                touched.name && (
-            }}
+                  name == "" ? "Kegiatan Tidak Boleh Kosong" : null
-            error={
+                )
-              touched.name && (
+              }
-                name == "" ? "Judul Kegiatan Tidak Boleh Kosong" : null
+            />
-              )
-            }
-            onBlur={() => setTouched({ ...touched, name: true })}
-          />
           }
         </Stack>
       </Box>
@@ -104,19 +114,19 @@ export default function EditTaskProject() {
         backgroundColor: `${tema.get().bgUtama}`,
       }}>
         {loading ?
-           <Skeleton height={50} radius={30} />
+          <Skeleton height={50} radius={30} />
-      :  
+          :
-        <Button
+          <Button
-          c={"white"}
+            c={"white"}
-          bg={tema.get().utama}
+            bg={tema.get().utama}
-          size="lg"
+            size="lg"
-          radius={30}
+            radius={30}
-          fullWidth
+            fullWidth
-          onClick={() => { onVerification() }}
+            onClick={() => { onCheck() }}
-        >
+          >
-          Simpan
+            Simpan
-        </Button>
+          </Button>
-      }
+        }
       </Box>