upd: modal konfirmasi

Deskripsi: - menerapkan semua modal baru pada semua fitur No Issues''
2026-02-14 14:01:41 +08:00
parent 10212aa5de
commit 039b26f5aa
31 changed files with 718 additions and 245 deletions
--- a/app/(application)/banner/index.tsx
+++ b/app/(application)/banner/index.tsx
@@ -1,9 +1,9 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi"
 import AppHeader from "@/components/AppHeader"
 import HeaderRightBannerList from "@/components/banner/headerBannerList"
 import BorderBottomItem from "@/components/borderBottomItem"
 import DrawerBottom from "@/components/drawerBottom"
 import MenuItemRow from "@/components/menuItemRow"
+import ModalConfirmation from "@/components/ModalConfirmation"
 import ModalLoading from "@/components/modalLoading"
 import Text from "@/components/Text"
 import { ConstEnv } from "@/constants/ConstEnv"
@@ -42,6 +42,7 @@ export default function BannerList() {
   const [refreshing, setRefreshing] = useState(false)
   const [loadingOpen, setLoadingOpen] = useState(false)
   const [viewImg, setViewImg] = useState(false)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)

   const handleDeleteEntity = async () => {
      try {
@@ -196,11 +197,9 @@ export default function BannerList() {
                  title="Hapus"
                  onPress={() => {
                     setModal(false)
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: 'Apakah anda yakin ingin menghapus data?',
-                        onPress: () => { handleDeleteEntity() }
-                     })
+                     setTimeout(() => {
+                        setShowDeleteModal(true)
+                     }, 600)
                  }}
               />
            </View>
@@ -213,6 +212,19 @@ export default function BannerList() {
            onRequestClose={() => setViewImg(false)}
            doubleTapToZoomEnabled
         />
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah anda yakin ingin menghapus data?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDeleteEntity()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+         />
      </SafeAreaView>
   )
 }
--- a/app/(application)/discussion/[id].tsx
+++ b/app/(application)/discussion/[id].tsx
@@ -1,4 +1,3 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
 import AppHeader from "@/components/AppHeader";
 import BorderBottomItem from "@/components/borderBottomItem";
 import BorderBottomItem2 from "@/components/borderBottomItem2";
@@ -8,10 +7,10 @@ import ImageUser from "@/components/imageNew";
 import { InputForm } from "@/components/inputForm";
 import LabelStatus from "@/components/labelStatus";
 import MenuItemRow from "@/components/menuItemRow";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import Skeleton from "@/components/skeleton";
 import SkeletonContent from "@/components/skeletonContent";
 import Text from '@/components/Text';
-import { ColorsStatus } from "@/constants/ColorsStatus";
 import { ConstEnv } from "@/constants/ConstEnv";
 import { regexOnlySpacesOrEnter } from "@/constants/OnlySpaceOrEnter";
 import Styles from "@/constants/Styles";
@@ -81,6 +80,7 @@ export default function DetailDiscussionGeneral() {
      comment: ''
   })
   const [viewEdit, setViewEdit] = useState(false)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)

   useEffect(() => {
      const onValueChange = reference.on('value', snapshot => {
@@ -370,7 +370,7 @@ export default function DetailDiscussionGeneral() {
                                       Platform.OS == 'android' && Styles.mb12,
                                    ]}
                                 >
-                                    <MaterialIcons name="send" size={25} style={(loadingSendKomentar || selectKomentar.comment == '' || regexOnlySpacesOrEnter.test(selectKomentar.comment) || data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin"))) ? {color:colors.dimmed} : {color:colors.tint}} />
+                                    <MaterialIcons name="send" size={25} style={(loadingSendKomentar || selectKomentar.comment == '' || regexOnlySpacesOrEnter.test(selectKomentar.comment) || data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin"))) ? { color: colors.dimmed } : { color: colors.tint }} />
                                 </Pressable>
                              }
                           />
@@ -396,7 +396,7 @@ export default function DetailDiscussionGeneral() {
                                       Platform.OS == 'android' && Styles.mb12,
                                    ]}
                                 >
-                                    <MaterialIcons name="send" size={25} style={(loadingSendKomentar || komentar == '' || regexOnlySpacesOrEnter.test(komentar) || data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin"))) ? {color: colors.dimmed} : {color:colors.tint}} />
+                                    <MaterialIcons name="send" size={25} style={(loadingSendKomentar || komentar == '' || regexOnlySpacesOrEnter.test(komentar) || data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin"))) ? { color: colors.dimmed } : { color: colors.tint }} />
                                 </Pressable>
                              }
                           />
@@ -425,17 +425,27 @@ export default function DetailDiscussionGeneral() {
                  icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
                  title="Hapus"
                  onPress={() => {
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: 'Apakah anda yakin ingin menghapus komentar?',
-                        onPress: () => {
-                           handleDeleteKomentar()
-                        }
-                     })
+                     setVisible(false)
+                     setTimeout(() => {
+                        setShowDeleteModal(true)
+                     }, 600)
                  }}
               />
            </View>
         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah anda yakin ingin menghapus komentar?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDeleteKomentar()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+         />
      </>
   )
 }
--- a/app/(application)/discussion/member/[id].tsx
+++ b/app/(application)/discussion/member/[id].tsx
@@ -1,9 +1,9 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
 import AppHeader from "@/components/AppHeader";
 import BorderBottomItem from "@/components/borderBottomItem";
 import DrawerBottom from "@/components/drawerBottom";
 import ImageUser from "@/components/imageNew";
 import MenuItemRow from "@/components/menuItemRow";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from '@/components/Text';
 import { ColorsStatus } from "@/constants/ColorsStatus";
@@ -36,6 +36,8 @@ export default function MemberDiscussionDetail() {
   const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
   const [loading, setLoading] = useState(true)
   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
+

   async function handleLoad(loading: boolean) {
      try {
@@ -151,20 +153,28 @@ export default function MemberDiscussionDetail() {
                     title="Keluarkan"
                     onPress={() => {
                        setModal(false)
-                        AlertKonfirmasi({
-                           title: 'Konfirmasi',
-                           desc: 'Apakah Anda yakin ingin mengeluarkan anggota?',
-                           onPress: () => {
-                              handleDeleteUser()
-                           }
-                        })
-
+                        setTimeout(() => {
+                           setShowDeleteModal(true)
+                        }, 600)
                     }}
                  />
               }

            </View>
         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah anda yakin ingin mengeluarkan anggota?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDeleteUser()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+         />
      </SafeAreaView>
   )
 }
--- a/app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx
@@ -1,4 +1,4 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi"
+import ModalConfirmation from "@/components/ModalConfirmation"
 import AppHeader from "@/components/AppHeader"
 import BorderBottomItem from "@/components/borderBottomItem"
 import ButtonBackHeader from "@/components/buttonBackHeader"
@@ -57,6 +57,7 @@ export default function DetailEventCalendar() {
   const dispatch = useDispatch()
   const entityUser = useSelector((state: any) => state.user);
   const [isMemberDivision, setIsMemberDivision] = useState(false);
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const [loading, setLoading] = useState(true)
   const [refreshing, setRefreshing] = useState(false)

@@ -301,18 +302,27 @@ export default function DetailEventCalendar() {
                  title="Keluarkan"
                  onPress={() => {
                     setModalMember(false)
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: 'Apakah Anda yakin ingin mengeluarkan anggota?',
-                        onPress: () => {
-                           handleDeleteUser()
-                        }
-                     })
-
+                     setTimeout(() => {
+                        setShowDeleteModal(true)
+                     }, 600)
                  }}
               />
            </View>
         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah Anda yakin ingin mengeluarkan anggota?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDeleteUser()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Keluar"
+            cancelText="Batal"
+            isDestructive
+         />
      </SafeAreaView>
   )
 }
--- a/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
@@ -1,4 +1,4 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import AppHeader from "@/components/AppHeader";
 import BorderBottomItem from "@/components/borderBottomItem";
 import BorderBottomItem2 from "@/components/borderBottomItem2";
@@ -92,6 +92,7 @@ export default function DiscussionDetail() {
      comment: ''
   })
   const [viewEdit, setViewEdit] = useState(false)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)



@@ -541,17 +542,28 @@ export default function DiscussionDetail() {
                  icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
                  title="Hapus"
                  onPress={() => {
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: 'Apakah anda yakin ingin menghapus komentar?',
-                        onPress: () => {
-                           handleDeleteKomentar()
-                        }
-                     })
+                     setVisible(false)
+                     setTimeout(() => {
+                        setShowDeleteModal(true)
+                     }, 600)
                  }}
               />
            </View>
         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah anda yakin ingin menghapus komentar?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDeleteKomentar()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+            isDestructive
+         />
      </>
   );
 }
--- a/app/(application)/division/[id]/(fitur-division)/document/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/document/index.tsx
@@ -1,4 +1,4 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import AppHeader from "@/components/AppHeader";
 import { ButtonHeader } from "@/components/buttonHeader";
 import HeaderRightDocument from "@/components/document/headerDocument";
@@ -89,6 +89,7 @@ export default function DocumentDivision() {
   const [loadingOpen, setLoadingOpen] = useState(false)
   const [isMemberDivision, setIsMemberDivision] = useState(false)
   const entityUser = useSelector((state: any) => state.user)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const [bodyRename, setBodyRename] = useState({
      id: "",
      name: "",
@@ -499,13 +500,7 @@ export default function DocumentDivision() {
                     }
                     title="Hapus"
                     onPress={() => {
-                        AlertKonfirmasi({
-                           title: "Konfirmasi",
-                           desc: "Apakah anda yakin ingin menghapus dokumen?",
-                           onPress: () => {
-                              handleDelete();
-                           },
-                        });
+                        setShowDeleteModal(true)
                     }}
                     column="many"
                     color="white"
@@ -612,6 +607,20 @@ export default function DocumentDivision() {
            value={id}
            item={selectedFiles[0]?.id}
         />
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah anda yakin ingin menghapus dokumen?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDelete()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+            isDestructive
+         />
      </SafeAreaView>
   );
 }
--- a/app/(application)/division/[id]/info.tsx
+++ b/app/(application)/division/[id]/info.tsx
@@ -1,4 +1,4 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi"
+import ModalConfirmation from "@/components/ModalConfirmation"
 import AppHeader from "@/components/AppHeader"
 import BorderBottomItem from "@/components/borderBottomItem"
 import HeaderRightDivisionInfo from "@/components/division/headerDivisionInfo"
@@ -59,14 +59,13 @@ export default function InformationDivision() {
      name: '',
      isAdmin: false
   })
+   const [showDeleteModal, setShowDeleteModal] = useState(false)

   function handleMemberOut() {
      setModal(false)
-      AlertKonfirmasi({
-         title: 'Konfirmasi',
-         desc: 'Apakah anda yakin ingin mengeluarkan anggota?',
-         onPress: () => { memberOut() }
-      })
+      setTimeout(() => {
+         setShowDeleteModal(true)
+      }, 600)
   }

   async function memberOut() {
@@ -287,6 +286,20 @@ export default function InformationDivision() {
               </Pressable>
            </View>
         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah anda yakin ingin mengeluarkan anggota?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               memberOut()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Keluar"
+            cancelText="Batal"
+            isDestructive
+         />
      </SafeAreaView>
   )
 }
--- a/app/(application)/division/create.tsx
+++ b/app/(application)/division/create.tsx
@@ -1,4 +1,4 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import AppHeader from "@/components/AppHeader";
 import ButtonNextHeader from "@/components/buttonNextHeader";
 import { InputForm } from "@/components/inputForm";
@@ -25,6 +25,7 @@ export default function CreateDivision() {
   const entityUser = useSelector((state: any) => state.user)
   const userLogin = useSelector((state: any) => state.entities)
   const [loadingBtn, setLoadingBtn] = useState(false)
+   const [showWarningModal, setShowWarningModal] = useState(false)
   const [error, setError] = useState({
      idGroup: false,
      name: false,
@@ -69,12 +70,7 @@ export default function CreateDivision() {
         const response = await apiCheckDivisionName({ data: { ...dataForm }, user: hasil })
         if (response.success) {
            if (!response.available) {
-               AlertKonfirmasi({
-                  title: 'Peringatan',
-                  category: 'warning',
-                  desc: 'Nama divisi sudah ada. Tidak dapat membuat divisi dengan nama yang sama',
-                  onPress: () => { }
-               })
+               setShowWarningModal(true)
            } else {
               handleSetData()
            }
@@ -181,6 +177,15 @@ export default function CreateDivision() {
            open={isSelect}
            valChoose={chooseGroup.val}
         />
+
+         <ModalConfirmation
+            visible={showWarningModal}
+            title="Peringatan"
+            message="Nama divisi sudah ada. Tidak dapat membuat divisi dengan nama yang sama"
+            onConfirm={() => setShowWarningModal(false)}
+            onCancel={() => setShowWarningModal(false)}
+            confirmText="Oke"
+         />
      </SafeAreaView>
   );
 }
--- a/app/(application)/group/index.tsx
+++ b/app/(application)/group/index.tsx
@@ -1,4 +1,4 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import BorderBottomItem from "@/components/borderBottomItem";
 import { ButtonForm } from "@/components/buttonForm";
 import ButtonTab from "@/components/buttonTab";
@@ -35,6 +35,7 @@ export default function Index() {
   const [search, setSearch] = useState('')
   const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
   const [loading, setLoading] = useState(true)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const [status, setStatus] = useState<'true' | 'false'>('true')
   const [loadingSubmit, setLoadingSubmit] = useState(false)
   const [idChoose, setIdChoose] = useState('')
@@ -205,11 +206,9 @@ export default function Index() {
                  title={activeChoose ? "Non Aktifkan" : "Aktifkan"}
                  onPress={() => {
                     setModal(false)
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: activeChoose ? 'Apakah anda yakin ingin menonaktifkan data?' : 'Apakah anda yakin ingin mengaktifkan data?',
-                        onPress: () => { handleDelete() }
-                     })
+                     setTimeout(() => {
+                        setShowDeleteModal(true)
+                     }, 600)
                  }}
               />
               <MenuItemRow
@@ -244,6 +243,19 @@ export default function Index() {
               </View>
            </View>
         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message={activeChoose ? 'Apakah anda yakin ingin menonaktifkan data?' : 'Apakah anda yakin ingin mengaktifkan data?'}
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDelete()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText={activeChoose ? "Nonaktifkan" : "Aktifkan"}
+            cancelText="Batal"
+         />
      </View >

   )
--- a/app/(application)/position/index.tsx
+++ b/app/(application)/position/index.tsx
@@ -1,4 +1,4 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import BorderBottomItem from "@/components/borderBottomItem";
 import { ButtonForm } from "@/components/buttonForm";
 import ButtonTab from "@/components/buttonTab";
@@ -50,6 +50,7 @@ export default function Index() {
      name: false,
   });
   const [refreshing, setRefreshing] = useState(false)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)

   const dispatch = useDispatch()
   const update = useSelector((state: any) => state.positionUpdate)
@@ -230,11 +231,9 @@ export default function Index() {
                  title={chooseData.active ? 'Non Aktifkan' : "Aktifkan"}
                  onPress={() => {
                     setModal(false)
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: chooseData.active ? 'Apakah anda yakin ingin menonaktifkan data?' : 'Apakah anda yakin ingin mengaktifkan data?',
-                        onPress: () => { handleDelete() }
-                     })
+                     setTimeout(() => {
+                        setShowDeleteModal(true)
+                     }, 600)
                  }}
               />
               <MenuItemRow
@@ -271,6 +270,19 @@ export default function Index() {
               </View>
            </View>
         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message={chooseData.active ? 'Apakah anda yakin ingin menonaktifkan data?' : 'Apakah anda yakin ingin mengaktifkan data?'}
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDelete()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText={chooseData.active ? "Nonaktifkan" : "Aktifkan"}
+            cancelText="Batal"
+         />
      </View>
   )
 }
--- a/app/(application)/profile.tsx
+++ b/app/(application)/profile.tsx
@@ -1,4 +1,4 @@
-import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import AppHeader from "@/components/AppHeader";
 import { ButtonHeader } from "@/components/buttonHeader";
 import ItemDetailMember from "@/components/itemDetailMember";
@@ -23,6 +23,7 @@ export default function Profile() {
   const [error, setError] = useState(false)
   const [preview, setPreview] = useState(false)
   const [showThemeModal, setShowThemeModal] = useState(false)
+   const [showLogoutModal, setShowLogoutModal] = useState(false)

   const ThemeOption = ({ label, value, icon }: { label: string, value: 'light' | 'dark' | 'system', icon: string }) => (
      <TouchableOpacity
@@ -55,11 +56,7 @@ export default function Profile() {
                        <ButtonHeader
                           item={<AntDesign name="logout" size={20} color="white" />}
                           onPress={() => {
-                              AlertKonfirmasi({
-                                 title: 'Keluar',
-                                 desc: 'Apakah anda yakin ingin keluar?',
-                                 onPress: () => { signOut() }
-                              })
+                              setShowLogoutModal(true)
                           }}
                        />
                     }
@@ -151,6 +148,20 @@ export default function Profile() {
            onRequestClose={() => setPreview(false)}
            doubleTapToZoomEnabled
         />
+
+         <ModalConfirmation
+            visible={showLogoutModal}
+            title="Keluar"
+            message="Apakah anda yakin ingin keluar?"
+            onConfirm={() => {
+               setShowLogoutModal(false)
+               signOut()
+            }}
+            onCancel={() => setShowLogoutModal(false)}
+            confirmText="Keluar"
+            cancelText="Batal"
+            isDestructive
+         />
      </SafeAreaView>
   )
 }
--- a/components/ModalConfirmation.tsx
+++ b/components/ModalConfirmation.tsx
@@ -0,0 +1,82 @@
+import Styles from '@/constants/Styles';
+import { useTheme } from '@/providers/ThemeProvider';
+import React from 'react';
+import { Modal, TouchableOpacity, View } from 'react-native';
+import Text from './Text';
+
+interface ModalConfirmationProps {
+   visible: boolean;
+   title: string;
+   message: string;
+   onConfirm: () => void;
+   onCancel: () => void;
+   confirmText?: string;
+   cancelText?: string;
+   isDestructive?: boolean;
+}
+
+const ModalConfirmation: React.FC<ModalConfirmationProps> = ({
+   visible,
+   title,
+   message,
+   onConfirm,
+   onCancel,
+   confirmText = 'Ya',
+   cancelText = 'Batal',
+   isDestructive = false,
+}) => {
+   const { colors } = useTheme();
+
+   return (
+      <Modal
+         transparent
+         visible={visible}
+         animationType="fade"
+         onRequestClose={onCancel}
+      >
+         <View style={Styles.modalOverlay}>
+            <View style={[Styles.modalConfirmContainer, { backgroundColor: colors.modalBackground }]}>
+               <View style={Styles.modalConfirmContent}>
+                  <Text style={Styles.modalConfirmTitle}>{title}</Text>
+                  <Text style={[Styles.modalConfirmMessage, { color: colors.text }]}>
+                     {message}
+                  </Text>
+               </View>
+
+               <View style={[Styles.modalConfirmDivider, { backgroundColor: colors.icon + '20' }]} />
+
+               <View style={Styles.modalConfirmFooter}>
+                  <TouchableOpacity
+                     style={Styles.modalConfirmButton}
+                     onPress={onCancel}
+                     activeOpacity={0.7}
+                  >
+                     <Text style={[Styles.modalConfirmButtonText, { color: colors.text }]}>
+                        {cancelText}
+                     </Text>
+                  </TouchableOpacity>
+
+                  <View style={[Styles.modalConfirmVerticalDivider, { backgroundColor: colors.icon + '20' }]} />
+
+                  <TouchableOpacity
+                     style={Styles.modalConfirmButton}
+                     onPress={onConfirm}
+                     activeOpacity={0.7}
+                  >
+                     <Text
+                        style={[
+                           Styles.modalConfirmButtonText,
+                           { color: isDestructive ? colors.error : colors.text }
+                        ]}
+                     >
+                        {confirmText}
+                     </Text>
+                  </TouchableOpacity>
+               </View>
+            </View>
+         </View>
+      </Modal>
+   );
+};
+
+export default ModalConfirmation;
--- a/components/announcement/headerAnnouncementDetail.tsx
+++ b/components/announcement/headerAnnouncementDetail.tsx
@@ -9,7 +9,7 @@ import { useState } from "react"
 import { View } from "react-native"
 import Toast from "react-native-toast-message"
 import { useDispatch, useSelector } from "react-redux"
-import AlertKonfirmasi from "../alertKonfirmasi"
+import ModalConfirmation from "../ModalConfirmation"
 import ButtonMenuHeader from "../buttonMenuHeader"
 import DrawerBottom from "../drawerBottom"
 import MenuItemRow from "../menuItemRow"
@@ -22,6 +22,7 @@ export default function HeaderRightAnnouncementDetail({ id }: Props) {
   const { colors } = useTheme();
   const [isVisible, setVisible] = useState(false)
   const update = useSelector((state: any) => state.announcementUpdate)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const dispatch = useDispatch()


@@ -60,17 +61,27 @@ export default function HeaderRightAnnouncementDetail({ id }: Props) {
                  title="Hapus"
                  onPress={() => {
                     setVisible(false)
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: 'Apakah anda yakin ingin menghapus pengumuman ini?',
-                        onPress: () => {
-                           handleDelete()
-                        }
-                     })
+                     setTimeout(() => {
+                        setShowDeleteModal(true)
+                     }, 600)
                  }}
               />
            </View>
         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah anda yakin ingin menghapus pengumuman ini?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDelete()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+            isDestructive
+         />
      </>
   )
 }
--- a/components/buttonSaveHeader.tsx
+++ b/components/buttonSaveHeader.tsx
@@ -1,6 +1,7 @@
 import { Feather } from "@expo/vector-icons"
-import AlertKonfirmasi from "./alertKonfirmasi"
+import ModalConfirmation from "./ModalConfirmation"
 import { ButtonHeader } from "./buttonHeader"
+import { useState } from "react"

 type Props = {
   category: 'create' | 'update' | 'cancel' | 'update-calendar'
@@ -9,29 +10,37 @@ type Props = {
 }

 export default function ButtonSaveHeader({ category, onPress, disable }: Props) {
+   const [showModal, setShowModal] = useState(false)
   return (
      <>
         <ButtonHeader
            item={<Feather name="check" size={25} color={disable ? "grey" : "white"} />}
            onPress={() => {
               if (!disable) {
-                  AlertKonfirmasi({
-                     title: 'Konfirmasi',
-                     desc: category == 'create'
-                        ? 'Apakah anda yakin ingin menambahkan data?'
-                        : category == 'cancel'
-                           ? 'Apakah anda yakin ingin membatalkan kegiatan? Pembatalan bersifat permanen'
-                           : category == 'update-calendar'
-                              ? 'Apakah Anda yakin ingin mengubah data acara ini? Data ini akan mempengaruhi semua data yang terkait'
-                              : 'Apakah anda yakin mengubah data?',
-                     onPress: () => {
-                        onPress && onPress()
-                     }
-                  })
+                  setShowModal(true)
               }
-            }
+            }}
+         />

+         <ModalConfirmation
+            visible={showModal}
+            title="Konfirmasi"
+            message={
+               category == 'create'
+                  ? 'Apakah anda yakin ingin menambahkan data?'
+                  : category == 'cancel'
+                     ? 'Apakah anda yakin ingin membatalkan kegiatan? Pembatalan bersifat permanen'
+                     : category == 'update-calendar'
+                        ? 'Apakah Anda yakin ingin mengubah data acara ini? Data ini akan mempengaruhi semua data yang terkait'
+                        : 'Apakah anda yakin mengubah data?'
            }
+            onConfirm={() => {
+               setShowModal(false)
+               onPress && onPress()
+            }}
+            onCancel={() => setShowModal(false)}
+            confirmText="Ya"
+            cancelText="Batal"
         />
      </>
   )
--- a/components/calendar/headerCalendarDetail.tsx
+++ b/components/calendar/headerCalendarDetail.tsx
@@ -9,7 +9,7 @@ import { useState } from "react"
 import { View } from "react-native"
 import Toast from "react-native-toast-message"
 import { useDispatch, useSelector } from "react-redux"
-import AlertKonfirmasi from "../alertKonfirmasi"
+import ModalConfirmation from "../ModalConfirmation"
 import ButtonMenuHeader from "../buttonMenuHeader"
 import DrawerBottom from "../drawerBottom"
 import MenuItemRow from "../menuItemRow"
@@ -23,6 +23,7 @@ export default function HeaderRightCalendarDetail({ id, idReminder }: Props) {
   const { colors } = useTheme()
   const [isVisible, setVisible] = useState(false)
   const { token, decryptToken } = useAuthSession()
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const update = useSelector((state: any) => state.calendarUpdate)
   const dispatch = useDispatch()

@@ -71,17 +72,27 @@ export default function HeaderRightCalendarDetail({ id, idReminder }: Props) {
                  title="Hapus"
                  onPress={() => {
                     setVisible(false)
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: 'Apakah anda yakin ingin menghapus data ini? Data ini akan mempengaruhi semua data yang terkait',
-                        onPress: () => {
-                           handleDeleteCalendar()
-                        }
-                     })
+                     setTimeout(() => {
+                        setShowDeleteModal(true)
+                     }, 600)
                  }}
               />
            </View>
         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah anda yakin ingin menghapus data ini? Data ini akan mempengaruhi semua data yang terkait"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDeleteCalendar()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+            isDestructive
+         />
      </>
   )
 }
--- a/components/discussion/headerDiscussionDetail.tsx
+++ b/components/discussion/headerDiscussionDetail.tsx
@@ -9,7 +9,7 @@ import { useState } from "react"
 import { View } from "react-native"
 import Toast from "react-native-toast-message"
 import { useDispatch, useSelector } from "react-redux"
-import AlertKonfirmasi from "../alertKonfirmasi"
+import ModalConfirmation from "../ModalConfirmation"
 import ButtonMenuHeader from "../buttonMenuHeader"
 import DrawerBottom from "../drawerBottom"
 import MenuItemRow from "../menuItemRow"
@@ -25,6 +25,8 @@ export default function HeaderRightDiscussionDetail({ id, status, isActive }: Pr
   const [isVisible, setVisible] = useState(false)
   const { token, decryptToken } = useAuthSession()
   const update = useSelector((state: any) => state.discussionUpdate)
+   const [showModal, setShowModal] = useState(false)
+   const [modalConfig, setModalConfig] = useState({ title: '', message: '', onConfirm: () => { } })
   const dispatch = useDispatch()

   const handleOpenClose = async () => {
@@ -86,13 +88,14 @@ export default function HeaderRightDiscussionDetail({ id, status, isActive }: Pr
                        title={status == 1 ? 'Tutup Diskusi' : 'Buka Diskusi'}
                        onPress={() => {
                           setVisible(false)
-                           AlertKonfirmasi({
-                              title: 'Konfirmasi',
-                              desc: `Apakah anda yakin ingin ${status == 1 ? 'menutup' : 'membuka'} diskusi?`,
-                              onPress: () => {
-                                 handleOpenClose()
-                              }
-                           })
+                           setTimeout(() => {
+                              setModalConfig({
+                                 title: 'Konfirmasi',
+                                 message: `Apakah anda yakin ingin ${status == 1 ? 'menutup' : 'membuka'} diskusi?`,
+                                 onConfirm: () => handleOpenClose()
+                              })
+                              setShowModal(true)
+                           }, 600)
                        }}
                     />
                  </>
@@ -102,17 +105,31 @@ export default function HeaderRightDiscussionDetail({ id, status, isActive }: Pr
                  title={isActive ? 'Arsipkan' : 'Aktifkan Diskusi'}
                  onPress={() => {
                     setVisible(false)
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: isActive ? 'Apakah anda yakin ingin mengarsipkan diskusi?' : 'Apakah anda yakin ingin mengaktifkan diskusi?',
-                        onPress: () => {
-                           handleArchive()
-                        }
-                     })
+                     setTimeout(() => {
+                        setModalConfig({
+                           title: 'Konfirmasi',
+                           message: isActive ? 'Apakah anda yakin ingin mengarsipkan diskusi?' : 'Apakah anda yakin ingin mengaktifkan diskusi?',
+                           onConfirm: () => handleArchive()
+                        })
+                        setShowModal(true)
+                     }, 600)
                  }}
               />
            </View>
         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showModal}
+            title={modalConfig.title}
+            message={modalConfig.message}
+            onConfirm={() => {
+               setShowModal(false)
+               modalConfig.onConfirm()
+            }}
+            onCancel={() => setShowModal(false)}
+            confirmText="Ya"
+            cancelText="Batal"
+         />
      </>
   )
 }
--- a/components/discussion_general/headerDiscussionDetail.tsx
+++ b/components/discussion_general/headerDiscussionDetail.tsx
@@ -9,7 +9,7 @@ import { useState } from "react"
 import { View } from "react-native"
 import Toast from "react-native-toast-message"
 import { useDispatch, useSelector } from "react-redux"
-import AlertKonfirmasi from "../alertKonfirmasi"
+import ModalConfirmation from "../ModalConfirmation"
 import ButtonMenuHeader from "../buttonMenuHeader"
 import DrawerBottom from "../drawerBottom"
 import MenuItemRow from "../menuItemRow"
@@ -25,6 +25,8 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
   const { colors } = useTheme();
   const [isVisible, setVisible] = useState(false)
   const entityUser = useSelector((state: any) => state.user)
+   const [showModal, setShowModal] = useState(false)
+   const [modalConfig, setModalConfig] = useState({ title: '', message: '', onConfirm: () => { } })
   const dispatch = useDispatch()
   const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)

@@ -88,13 +90,14 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
                                    title={status == 1 ? 'Tutup Diskusi' : 'Buka Diskusi'}
                                    onPress={() => {
                                       setVisible(false)
-                                       AlertKonfirmasi({
-                                          title: 'Konfirmasi',
-                                          desc: status == 1 ? 'Apakah anda yakin ingin menutup diskusi?' : 'Apakah anda yakin ingin membuka diskusi?',
-                                          onPress: () => {
-                                             handleUpdateStatus()
-                                          }
-                                       })
+                                       setTimeout(() => {
+                                          setModalConfig({
+                                             title: 'Konfirmasi',
+                                             message: status == 1 ? 'Apakah anda yakin ingin menutup diskusi?' : 'Apakah anda yakin ingin membuka diskusi?',
+                                             onConfirm: () => handleUpdateStatus()
+                                          })
+                                          setShowModal(true)
+                                       }, 600)
                                    }}
                                 />
                              </>
@@ -105,11 +108,14 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
                              title="Aktifkan Diskusi"
                              onPress={() => {
                                 setVisible(false)
-                                 AlertKonfirmasi({
-                                    title: 'Konfirmasi',
-                                    desc: 'Apakah anda yakin ingin mengaktifkan diskusi ini?',
-                                    onPress: () => { handleDelete() }
-                                 })
+                                 setTimeout(() => {
+                                    setModalConfig({
+                                       title: 'Konfirmasi',
+                                       message: 'Apakah anda yakin ingin mengaktifkan diskusi ini?',
+                                       onConfirm: () => handleDelete()
+                                    })
+                                    setShowModal(true)
+                                 }, 600)
                              }}
                           />

@@ -125,16 +131,32 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
                     title="Arsipkan"
                     onPress={() => {
                        setVisible(false)
-                        AlertKonfirmasi({
-                           title: 'Konfirmasi',
-                           desc: 'Apakah anda yakin ingin mengarsipkan diskusi?',
-                           onPress: () => { handleDelete() }
-                        })
+                        setTimeout(() => {
+                           setModalConfig({
+                              title: 'Konfirmasi',
+                              message: 'Apakah anda yakin ingin mengarsipkan diskusi?',
+                              onConfirm: () => handleDelete()
+                           })
+                           setShowModal(true)
+                        }, 600)
                     }}
                  />
               </View>
            }
         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showModal}
+            title={modalConfig.title}
+            message={modalConfig.message}
+            onConfirm={() => {
+               setShowModal(false)
+               modalConfig.onConfirm()
+            }}
+            onCancel={() => setShowModal(false)}
+            confirmText="Ya"
+            cancelText="Batal"
+         />
      </>
   )
 }
--- a/components/division/headerDivisionInfo.tsx
+++ b/components/division/headerDivisionInfo.tsx
@@ -8,7 +8,7 @@ import { useState } from "react"
 import { View } from "react-native"
 import Toast from "react-native-toast-message"
 import { useDispatch, useSelector } from "react-redux"
-import AlertKonfirmasi from "../alertKonfirmasi"
+import ModalConfirmation from "../ModalConfirmation"
 import ButtonMenuHeader from "../buttonMenuHeader"
 import DrawerBottom from "../drawerBottom"
 import MenuItemRow from "../menuItemRow"
@@ -23,6 +23,7 @@ export default function HeaderRightDivisionInfo({ id, active }: Props) {
   const { colors } = useTheme();
   const [isVisible, setVisible] = useState(false)
   const { token, decryptToken } = useAuthSession()
+   const [showModal, setShowModal] = useState(false)
   const update = useSelector((state: any) => state.divisionUpdate)
   const dispatch = useDispatch()

@@ -62,15 +63,26 @@ export default function HeaderRightDivisionInfo({ id, active }: Props) {
                  title={active ? "Non Aktifkan" : "Aktifkan"}
                  onPress={() => {
                     setVisible(false)
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: active ? 'Apakah anda yakin ingin menonaktifkan divisi?' : 'Apakah anda yakin ingin mengaktifkan divisi?',
-                        onPress: () => { handleUpdateStatus() }
-                     })
+                     setTimeout(() => {
+                        setShowModal(true)
+                     }, 600)
                  }}
               />
            </View>
         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showModal}
+            title="Konfirmasi"
+            message={active ? 'Apakah anda yakin ingin menonaktifkan divisi?' : 'Apakah anda yakin ingin mengaktifkan divisi?'}
+            onConfirm={() => {
+               setShowModal(false)
+               handleUpdateStatus()
+            }}
+            onCancel={() => setShowModal(false)}
+            confirmText="Konfirmasi"
+            cancelText="Batal"
+         />
      </>
   )
 }
--- a/components/document/menuBottomSelectDocument.tsx
+++ b/components/document/menuBottomSelectDocument.tsx
@@ -6,7 +6,7 @@ import { useState } from "react";
 import { Pressable, ScrollView, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import Toast from "react-native-toast-message";
-import AlertKonfirmasi from "../alertKonfirmasi";
+import ModalConfirmation from "../ModalConfirmation";
 import DrawerBottom from "../drawerBottom";
 import { InputForm } from "../inputForm";
 import ItemAccordion from "../itemAccordion";
@@ -29,6 +29,7 @@ export default function MenuBottomSelectDocument({ onDone }: Props) {
   const [isRename, setRename] = useState(false)
   const [isShare, setShare] = useState(false)
   const [isMoveCopy, setMoveCopy] = useState(false)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const [valMoveCopy, setValMoveCopy] = useState<'move' | 'copy'>('copy')
   const open = useSharedValue(false)

@@ -58,15 +59,7 @@ export default function MenuBottomSelectDocument({ onDone }: Props) {
                  icon={<MaterialCommunityIcons name="trash-can-outline" color="white" size={25} />}
                  title="Hapus"
                  onPress={() => {
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: 'Apakah anda yakin ingin menghapus data?',
-
-                        onPress: () => {
-                           onDone()
-                           Toast.show({ type: 'small', text1: 'Berhasil menghapus data', })
-                        }
-                     })
+                     setShowDeleteModal(true)
                  }}
                  column="many"
                  color="white"
@@ -213,6 +206,21 @@ export default function MenuBottomSelectDocument({ onDone }: Props) {
            }}
         />
         <ModalSalinMove open={isMoveCopy} close={setMoveCopy} category={valMoveCopy} onConfirm={(value: string) => { }} dataChoose={[]} />
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah anda yakin ingin menghapus data?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               onDone()
+               Toast.show({ type: 'small', text1: 'Berhasil menghapus data', })
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+            isDestructive
+         />
      </>
   )
 }
--- a/components/member/headerMemberDetail.tsx
+++ b/components/member/headerMemberDetail.tsx
@@ -9,7 +9,7 @@ import { useState } from "react"
 import { View } from "react-native"
 import Toast from "react-native-toast-message"
 import { useDispatch, useSelector } from "react-redux"
-import AlertKonfirmasi from "../alertKonfirmasi"
+import ModalConfirmation from "../ModalConfirmation"
 import ButtonMenuHeader from "../buttonMenuHeader"
 import DrawerBottom from "../drawerBottom"
 import MenuItemRow from "../menuItemRow"
@@ -23,6 +23,7 @@ export default function HeaderRightMemberDetail({ active, id }: Props) {
   const { token, decryptToken } = useAuthSession()
   const [isVisible, setVisible] = useState(false)
   const update = useSelector((state: any) => state.memberUpdate)
+   const [showModal, setShowModal] = useState(false)
   const { colors } = useTheme();
   const dispatch = useDispatch()

@@ -54,13 +55,9 @@ export default function HeaderRightMemberDetail({ active, id }: Props) {
                  title={active ? "Non Aktifkan" : "Aktifkan"}
                  onPress={() => {
                     setVisible(false)
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: active ? 'Apakah anda yakin ingin menonaktifkan user?' : 'Apakah anda yakin ingin mengaktifkan user?',
-                        onPress: () => {
-                           handleActive()
-                        }
-                     })
+                     setTimeout(() => {
+                        setShowModal(true)
+                     }, 600)
                  }}
               />
               <MenuItemRow
@@ -73,6 +70,19 @@ export default function HeaderRightMemberDetail({ active, id }: Props) {
               />
            </View>
         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showModal}
+            title="Konfirmasi"
+            message={active ? 'Apakah anda yakin ingin menonaktifkan user?' : 'Apakah anda yakin ingin mengaktifkan user?'}
+            onConfirm={() => {
+               setShowModal(false)
+               handleActive()
+            }}
+            onCancel={() => setShowModal(false)}
+            confirmText="Konfirmasi"
+            cancelText="Batal"
+         />
      </>
   )
 }
--- a/components/project/headerProjectDetail.tsx
+++ b/components/project/headerProjectDetail.tsx
@@ -9,8 +9,9 @@ import { useState } from "react"
 import { View } from "react-native"
 import Toast from "react-native-toast-message"
 import { useDispatch, useSelector } from "react-redux"
-import AlertKonfirmasi from "../alertKonfirmasi"
+import ModalConfirmation from "../ModalConfirmation"
 import ButtonMenuHeader from "../buttonMenuHeader"
+import BorderBottomItem from "../borderBottomItem";
 import DrawerBottom from "../drawerBottom"
 import { InputForm } from "../inputForm"
 import MenuItemRow from "../menuItemRow"
@@ -29,6 +30,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
   const dispatch = useDispatch()
   const update = useSelector((state: any) => state.projectUpdate)
   const [isAddLink, setAddLink] = useState(false)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const [link, setLink] = useState("")

   async function handleDelete() {
@@ -152,11 +154,9 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
                           title="Hapus"
                           onPress={() => {
                              setVisible(false)
-                              AlertKonfirmasi({
-                                 title: 'Konfirmasi',
-                                 desc: 'Apakah Anda yakin ingin menghapus kegiatan ini? Kegiatan yang dihapus tidak dapat dikembalikan',
-                                 onPress: () => { handleDelete() }
-                              })
+                              setTimeout(() => {
+                                 setShowDeleteModal(true)
+                              }, 600)
                           }}
                        />
                        :
@@ -173,6 +173,20 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
            }
         </DrawerBottom>

+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah Anda yakin ingin menghapus kegiatan ini? Kegiatan yang dihapus tidak dapat dikembalikan"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDelete()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+            isDestructive
+         />
+
         <ModalFloat
            title="Tambah Link"
            isVisible={isAddLink}
--- a/components/project/sectionFile.tsx
+++ b/components/project/sectionFile.tsx
@@ -14,7 +14,7 @@ import { Alert, Platform, View } from "react-native";
 import * as mime from 'react-native-mime-types';
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
-import AlertKonfirmasi from "../alertKonfirmasi";
+import ModalConfirmation from "../ModalConfirmation";
 import BorderBottomItem from "../borderBottomItem";
 import DrawerBottom from "../drawerBottom";
 import MenuItemRow from "../menuItemRow";
@@ -42,6 +42,7 @@ export default function SectionFile({ status, member, refreshing }: { status: nu
   const [loading, setLoading] = useState(true)
   const arrSkeleton = Array.from({ length: 3 })
   const [selectFile, setSelectFile] = useState<Props | null>(null)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const [loadingOpen, setLoadingOpen] = useState(false)

   async function handleLoad(loading: boolean) {
@@ -185,19 +186,28 @@ export default function SectionFile({ status, member, refreshing }: { status: nu
                        onPress={() => {
                           if (status == 3) return
                           setModal(false)
-                           AlertKonfirmasi({
-                              title: 'Konfirmasi',
-                              desc: 'Apakah Anda yakin ingin menghapus file ini? File yang dihapus tidak dapat dikembalikan',
-                              onPress: () => {
-                                 handleDelete()
-                              }
-                           })
-
+                           setTimeout(() => {
+                              setShowDeleteModal(true)
+                           }, 600)
                        }}
                     />
               }
            </View>
         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah Anda yakin ingin menghapus file ini? File yang dihapus tidak dapat dikembalikan"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDelete()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+            isDestructive
+         />
      </>
   )
 }
--- a/components/project/sectionLink.tsx
+++ b/components/project/sectionLink.tsx
@@ -10,7 +10,7 @@ import { useEffect, useState } from "react";
 import { Linking, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
-import AlertKonfirmasi from "../alertKonfirmasi";
+import ModalConfirmation from "../ModalConfirmation";
 import BorderBottomItem from "../borderBottomItem";
 import DrawerBottom from "../drawerBottom";
 import MenuItemRow from "../menuItemRow";
@@ -32,6 +32,7 @@ export default function SectionLink({ status, member, refreshing }: { status: nu
   const update = useSelector((state: any) => state.projectUpdate)
   const dispatch = useDispatch()
   const [selectLink, setSelectLink] = useState<Props | null>(null)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)

   async function handleLoad() {
      try {
@@ -122,19 +123,28 @@ export default function SectionLink({ status, member, refreshing }: { status: nu
                              onPress={() => {
                                 if (status == 3) return
                                 setModal(false)
-                                 AlertKonfirmasi({
-                                    title: 'Konfirmasi',
-                                    desc: 'Apakah Anda yakin ingin menghapus link ini? Link yang dihapus tidak dapat dikembalikan',
-                                    onPress: () => {
-                                       handleDelete()
-                                    }
-                                 })
-
+                                 setTimeout(() => {
+                                    setShowDeleteModal(true)
+                                 }, 600)
                              }}
                           />
                     }
                  </View>
               </DrawerBottom>
+
+               <ModalConfirmation
+                  visible={showDeleteModal}
+                  title="Konfirmasi"
+                  message="Apakah Anda yakin ingin menghapus link ini? Link yang dihapus tidak dapat dikembalikan"
+                  onConfirm={() => {
+                     setShowDeleteModal(false)
+                     handleDelete()
+                  }}
+                  onCancel={() => setShowDeleteModal(false)}
+                  confirmText="Hapus"
+                  cancelText="Batal"
+                  isDestructive
+               />
            </>
         }
      </>
--- a/components/project/sectionMember.tsx
+++ b/components/project/sectionMember.tsx
@@ -10,7 +10,7 @@ import { useEffect, useState } from "react";
 import { View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
-import AlertKonfirmasi from "../alertKonfirmasi";
+import ModalConfirmation from "../ModalConfirmation";
 import BorderBottomItem from "../borderBottomItem";
 import DrawerBottom from "../drawerBottom";
 import ImageUser from "../imageNew";
@@ -35,6 +35,8 @@ export default function SectionMember({ status, refreshing }: { status: number |
   const [isModal, setModal] = useState(false);
   const { token, decryptToken } = useAuthSession();
   const { id } = useLocalSearchParams<{ id: string }>();
+   const [selectLink, setSelectLink] = useState<Props | null>(null);
+   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [data, setData] = useState<Props[]>([]);
   const [loading, setLoading] = useState(true)
   const arrSkeleton = Array.from({ length: 3 })
@@ -168,16 +170,28 @@ export default function SectionMember({ status, refreshing }: { status: number |
                     title="Keluarkan"
                     onPress={() => {
                        setModal(false)
-                        AlertKonfirmasi({
-                           title: "Konfirmasi",
-                           desc: "Apakah Anda yakin ingin mengeluarkan anggota?",
-                           onPress: () => { handleDeleteMember() },
-                        });
+                        setTimeout(() => {
+                           setShowDeleteModal(true)
+                        }, 600)
                     }}
                  />
               }
            </View>
         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah Anda yakin ingin mengeluarkan anggota?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDeleteMember()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Keluarkan"
+            cancelText="Batal"
+            isDestructive
+         />
      </>
   );
 }
--- a/components/project/sectionTanggalTugas.tsx
+++ b/components/project/sectionTanggalTugas.tsx
@@ -9,7 +9,7 @@ import { useEffect, useState } from "react";
 import { View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
-import AlertKonfirmasi from "../alertKonfirmasi";
+import ModalConfirmation from "../ModalConfirmation";
 import DrawerBottom from "../drawerBottom";
 import ItemSectionTanggalTugas from "../itemSectionTanggalTugas";
 import MenuItemRow from "../menuItemRow";
@@ -45,6 +45,7 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
      id: '',
      status: 0,
   })
+   const [showDeleteModal, setShowDeleteModal] = useState(false)

   async function handleLoad(loading: boolean) {
      try {
@@ -215,16 +216,28 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
                  title="Hapus Tugas"
                  onPress={() => {
                     setModal(false)
-                     AlertKonfirmasi({
-                        title: "Konfirmasi",
-                        desc: "Apakah anda yakin ingin menghapus data ini?",
-                        onPress: () => { handleDelete() },
-                     });
+                     setTimeout(() => {
+                        setShowDeleteModal(true)
+                     }, 600)
                  }}
               />
            </View>
         </DrawerBottom>

+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah anda yakin ingin menghapus data ini?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDelete()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+            isDestructive
+         />
+
         <ModalSelect
            category="status-task"
            close={() => { setSelect(false) }}
--- a/components/task/headerTaskDetail.tsx
+++ b/components/task/headerTaskDetail.tsx
@@ -9,7 +9,7 @@ import { useState } from "react"
 import { View } from "react-native"
 import Toast from "react-native-toast-message"
 import { useDispatch, useSelector } from "react-redux"
-import AlertKonfirmasi from "../alertKonfirmasi"
+import ModalConfirmation from "../ModalConfirmation"
 import ButtonMenuHeader from "../buttonMenuHeader"
 import DrawerBottom from "../drawerBottom"
 import { InputForm } from "../inputForm"
@@ -31,6 +31,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
   const dispatch = useDispatch()
   const update = useSelector((state: any) => state.taskUpdate)
   const [isAddLink, setAddLink] = useState(false)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const [link, setLink] = useState("")

   async function handleDelete() {
@@ -158,11 +159,9 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
                           title="Hapus"
                           onPress={() => {
                              setVisible(false)
-                              AlertKonfirmasi({
-                                 title: 'Konfirmasi',
-                                 desc: 'Apakah Anda yakin ingin menghapus tugas ini? Tugas yang dihapus tidak dapat dikembalikan',
-                                 onPress: () => { handleDelete() }
-                              })
+                              setTimeout(() => {
+                                 setShowDeleteModal(true)
+                              }, 600)
                           }}
                        />

@@ -180,6 +179,20 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
            }
         </DrawerBottom >

+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah Anda yakin ingin menghapus tugas ini? Tugas yang dihapus tidak dapat dikembalikan"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDelete()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+            isDestructive
+         />
+
         <ModalFloat
            title="Tambah Link"
            isVisible={isAddLink}
--- a/components/task/sectionFileTask.tsx
+++ b/components/task/sectionFileTask.tsx
@@ -14,7 +14,8 @@ import { Alert, Platform, View } from "react-native";
 import * as mime from 'react-native-mime-types';
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
-import AlertKonfirmasi from "../alertKonfirmasi";
+import ModalConfirmation from "../ModalConfirmation";
+import ButtonMenuHeader from "../buttonMenuHeader";
 import BorderBottomItem from "../borderBottomItem";
 import DrawerBottom from "../drawerBottom";
 import MenuItemRow from "../menuItemRow";
@@ -32,6 +33,9 @@ type Props = {
 export default function SectionFileTask({ refreshing, isMemberDivision }: { refreshing: boolean, isMemberDivision: boolean }) {
   const { colors } = useTheme()
   const [isModal, setModal] = useState(false)
+   const [isAddLink, setAddLink] = useState(false)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
+   const [link, setLink] = useState("")
   const { token, decryptToken } = useAuthSession()
   const { detail } = useLocalSearchParams<{ detail: string }>()
   const [data, setData] = useState<Props[]>([])
@@ -174,14 +178,9 @@ export default function SectionFileTask({ refreshing, isMemberDivision }: { refr
                        title="Hapus"
                        onPress={() => {
                           setModal(false)
-                           AlertKonfirmasi({
-                              title: 'Konfirmasi',
-                              desc: 'Apakah Anda yakin ingin menghapus file ini? File yang dihapus tidak dapat dikembalikan',
-                              onPress: () => {
-                                 handleDelete()
-                              }
-                           })
-
+                           setTimeout(() => {
+                              setShowDeleteModal(true)
+                           }, 600)
                        }}
                     />
                     :
@@ -190,6 +189,20 @@ export default function SectionFileTask({ refreshing, isMemberDivision }: { refr

            </View>
         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah Anda yakin ingin menghapus file ini? File yang dihapus tidak dapat dikembalikan"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDelete()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+            isDestructive
+         />
      </>
   )
 }
--- a/components/task/sectionLinkTask.tsx
+++ b/components/task/sectionLinkTask.tsx
@@ -10,7 +10,7 @@ import { useEffect, useState } from "react";
 import { Linking, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
-import AlertKonfirmasi from "../alertKonfirmasi";
+import ModalConfirmation from "../ModalConfirmation";
 import BorderBottomItem from "../borderBottomItem";
 import DrawerBottom from "../drawerBottom";
 import MenuItemRow from "../menuItemRow";
@@ -30,6 +30,7 @@ export default function SectionLinkTask({ refreshing, isMemberDivision }: { refr
   const update = useSelector((state: any) => state.taskUpdate)
   const dispatch = useDispatch()
   const [selectLink, setSelectLink] = useState<Props | null>(null)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const entityUser = useSelector((state: any) => state.user);

   async function handleLoad() {
@@ -112,11 +113,9 @@ export default function SectionLinkTask({ refreshing, isMemberDivision }: { refr
                              title="Hapus"
                              onPress={() => {
                                 setModal(false)
-                                 AlertKonfirmasi({
-                                    title: 'Konfirmasi',
-                                    desc: 'Apakah Anda yakin ingin menghapus link ini? Link yang dihapus tidak dapat dikembalikan',
-                                    onPress: () => { handleDelete() }
-                                 })
+                                 setTimeout(() => {
+                                    setShowDeleteModal(true)
+                                 }, 600)
                              }}
                           />
                           :
@@ -125,6 +124,20 @@ export default function SectionLinkTask({ refreshing, isMemberDivision }: { refr

                  </View>
               </DrawerBottom>
+
+               <ModalConfirmation
+                  visible={showDeleteModal}
+                  title="Konfirmasi"
+                  message="Apakah Anda yakin ingin menghapus link ini? Link yang dihapus tidak dapat dikembalikan"
+                  onConfirm={() => {
+                     setShowDeleteModal(false)
+                     handleDelete()
+                  }}
+                  onCancel={() => setShowDeleteModal(false)}
+                  confirmText="Hapus"
+                  cancelText="Batal"
+                  isDestructive
+               />
            </>
         }
      </>
--- a/components/task/sectionMemberTask.tsx
+++ b/components/task/sectionMemberTask.tsx
@@ -10,7 +10,7 @@ import { useEffect, useState } from "react";
 import { View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
-import AlertKonfirmasi from "../alertKonfirmasi";
+import ModalConfirmation from "../ModalConfirmation";
 import BorderBottomItem from "../borderBottomItem";
 import DrawerBottom from "../drawerBottom";
 import ImageUser from "../imageNew";
@@ -30,6 +30,8 @@ type Props = {
 export default function SectionMemberTask({ refreshing, isAdminDivision }: { refreshing: boolean, isAdminDivision: boolean }) {
   const { colors } = useTheme()
   const [isModal, setModal] = useState(false);
+   const [selectLink, setSelectLink] = useState<Props | null>(null)
+   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const entityUser = useSelector((state: any) => state.user);
   const { token, decryptToken } = useAuthSession();
   const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
@@ -132,7 +134,7 @@ export default function SectionMemberTask({ refreshing, isAdminDivision }: { ref
                           );
                        })
                     ) : (
-                        <Text style={[ Styles.textDefault, { textAlign: "center", color:colors.dimmed }, ]} >
+                        <Text style={[Styles.textDefault, { textAlign: "center", color: colors.dimmed },]} >
                           Tidak ada anggota
                        </Text>
                     )
@@ -177,11 +179,9 @@ export default function SectionMemberTask({ refreshing, isAdminDivision }: { ref
                        title="Keluarkan"
                        onPress={() => {
                           setModal(false)
-                           AlertKonfirmasi({
-                              title: "Konfirmasi",
-                              desc: "Apakah Anda yakin ingin mengeluarkan anggota?",
-                              onPress: () => { handleDeleteMember() },
-                           });
+                           setTimeout(() => {
+                              setShowDeleteModal(true)
+                           }, 600)
                        }}
                     />
                     :
@@ -189,6 +189,20 @@ export default function SectionMemberTask({ refreshing, isAdminDivision }: { ref
               }
            </View>
         </DrawerBottom>
+
+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah Anda yakin ingin mengeluarkan anggota?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDeleteMember()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Keluarkan"
+            cancelText="Batal"
+            isDestructive
+         />
      </>
   );
 }
--- a/components/task/sectionTanggalTugasTask.tsx
+++ b/components/task/sectionTanggalTugasTask.tsx
@@ -9,7 +9,7 @@ import { useEffect, useState } from "react";
 import { View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
-import AlertKonfirmasi from "../alertKonfirmasi";
+import ModalConfirmation from "../ModalConfirmation";
 import DrawerBottom from "../drawerBottom";
 import ItemSectionTanggalTugas from "../itemSectionTanggalTugas";
 import MenuItemRow from "../menuItemRow";
@@ -44,6 +44,7 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
      id: '',
      status: 0,
   })
+   const [showDeleteModal, setShowDeleteModal] = useState(false)

   async function handleLoad(loading: boolean) {
      try {
@@ -211,14 +212,9 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
                        title="Hapus Tugas"
                        onPress={() => {
                           setModal(false)
-                           AlertKonfirmasi({
-                              title: 'Konfirmasi',
-                              desc: 'Apakah anda yakin ingin menghapus data ini?',
-                              onPress: () => {
-                                 handleDelete()
-                              }
-                           })
-
+                           setTimeout(() => {
+                              setShowDeleteModal(true)
+                           }, 600)
                        }}
                     />
                  </View>
@@ -227,6 +223,20 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
            }
         </DrawerBottom>

+         <ModalConfirmation
+            visible={showDeleteModal}
+            title="Konfirmasi"
+            message="Apakah anda yakin ingin menghapus data ini?"
+            onConfirm={() => {
+               setShowDeleteModal(false)
+               handleDelete()
+            }}
+            onCancel={() => setShowDeleteModal(false)}
+            confirmText="Hapus"
+            cancelText="Batal"
+            isDestructive
+         />
+
         <ModalSelect
            category="status-task"
            close={() => setSelect(false)}
--- a/constants/Styles.ts
+++ b/constants/Styles.ts
@@ -502,7 +502,7 @@ const Styles = StyleSheet.create({
   iconContent: {
      padding: 10,
      borderRadius: 100,
-      backgroundColor:'#E5E7EB'
+      backgroundColor: '#E5E7EB'
   },
   wrapHeadViewMember: {
      backgroundColor: '#19345E',
@@ -723,7 +723,58 @@ const Styles = StyleSheet.create({
      shadowOpacity: 0.2,
      shadowRadius: 5,
      elevation: 50,
-   }
+   },
+   modalOverlay: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.6)',
+      justifyContent: 'center',
+      alignItems: 'center',
+   },
+   modalConfirmContainer: {
+      width: '80%',
+      borderRadius: 14,
+      overflow: 'hidden',
+      elevation: 5,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.25,
+      shadowRadius: 3.84,
+   },
+   modalConfirmContent: {
+      padding: 20,
+      alignItems: 'center',
+   },
+   modalConfirmTitle: {
+      fontSize: 18,
+      fontWeight: 'bold',
+      marginBottom: 8,
+      textAlign: 'center',
+   },
+   modalConfirmMessage: {
+      fontSize: 14,
+      textAlign: 'center',
+      lineHeight: 20,
+   },
+   modalConfirmDivider: {
+      height: 1,
+      width: '100%',
+   },
+   modalConfirmFooter: {
+      flexDirection: 'row',
+      height: 50,
+   },
+   modalConfirmButton: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+   },
+   modalConfirmButtonText: {
+      fontSize: 16,
+   },
+   modalConfirmVerticalDivider: {
+      width: 1,
+      height: '100%',
+   },
 })

 export default Styles;