upd: modal konfirmasi

Deskripsi:
- menerapkan semua modal baru pada semua fitur

No Issues''

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({
+                     setTimeout(() => {
-                        title: 'Konfirmasi',
+                        setShowDeleteModal(true)
-                        desc: 'Apakah anda yakin ingin menghapus data?',
+                     }, 600)
-                        onPress: () => { handleDeleteEntity() }
-                     })
                   }}
                />
             </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>
    )
 }

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({
+                     setVisible(false)
-                        title: 'Konfirmasi',
+                     setTimeout(() => {
-                        desc: 'Apakah anda yakin ingin menghapus komentar?',
+                        setShowDeleteModal(true)
-                        onPress: () => {
+                     }, 600)
-                           handleDeleteKomentar()
-                        }
-                     })
                   }}
                />
             </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"
+         />
       </>
    )
 }

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({
+                        setTimeout(() => {
-                           title: 'Konfirmasi',
+                           setShowDeleteModal(true)
-                           desc: 'Apakah Anda yakin ingin mengeluarkan anggota?',
+                        }, 600)
-                           onPress: () => {
-                              handleDeleteUser()
-                           }
-                        })
-
                      }}
                   />
                }
 
             </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>
    )
 }

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({
+                     setTimeout(() => {
-                        title: 'Konfirmasi',
+                        setShowDeleteModal(true)
-                        desc: 'Apakah Anda yakin ingin mengeluarkan anggota?',
+                     }, 600)
-                        onPress: () => {
-                           handleDeleteUser()
-                        }
-                     })
-
                   }}
                />
             </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>
    )
 }

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({
+                     setVisible(false)
-                        title: 'Konfirmasi',
+                     setTimeout(() => {
-                        desc: 'Apakah anda yakin ingin menghapus komentar?',
+                        setShowDeleteModal(true)
-                        onPress: () => {
+                     }, 600)
-                           handleDeleteKomentar()
-                        }
-                     })
                   }}
                />
             </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
+         />
       </>
    );
 }

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({
+                        setShowDeleteModal(true)
-                           title: "Konfirmasi",
-                           desc: "Apakah anda yakin ingin menghapus dokumen?",
-                           onPress: () => {
-                              handleDelete();
-                           },
-                        });
                      }}
                      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>
    );
 }

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({
+      setTimeout(() => {
-         title: 'Konfirmasi',
+         setShowDeleteModal(true)
-         desc: 'Apakah anda yakin ingin mengeluarkan anggota?',
+      }, 600)
-         onPress: () => { memberOut() }
-      })
    }
 
    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>
    )
 }

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({
+               setShowWarningModal(true)
-                  title: 'Peringatan',
-                  category: 'warning',
-                  desc: 'Nama divisi sudah ada. Tidak dapat membuat divisi dengan nama yang sama',
-                  onPress: () => { }
-               })
             } 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>
    );
 }

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({
+                     setTimeout(() => {
-                        title: 'Konfirmasi',
+                        setShowDeleteModal(true)
-                        desc: activeChoose ? 'Apakah anda yakin ingin menonaktifkan data?' : 'Apakah anda yakin ingin mengaktifkan data?',
+                     }, 600)
-                        onPress: () => { handleDelete() }
-                     })
                   }}
                />
                <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 >
 
    )

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({
+                     setTimeout(() => {
-                        title: 'Konfirmasi',
+                        setShowDeleteModal(true)
-                        desc: chooseData.active ? 'Apakah anda yakin ingin menonaktifkan data?' : 'Apakah anda yakin ingin mengaktifkan data?',
+                     }, 600)
-                        onPress: () => { handleDelete() }
-                     })
                   }}
                />
                <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>
    )
 }

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({
+                              setShowLogoutModal(true)
-                                 title: 'Keluar',
-                                 desc: 'Apakah anda yakin ingin keluar?',
-                                 onPress: () => { signOut() }
-                              })
                            }}
                         />
                      }
@@ -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>
    )
 }

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;

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({
+                     setTimeout(() => {
-                        title: 'Konfirmasi',
+                        setShowDeleteModal(true)
-                        desc: 'Apakah anda yakin ingin menghapus pengumuman ini?',
+                     }, 600)
-                        onPress: () => {
-                           handleDelete()
-                        }
-                     })
                   }}
                />
             </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
+         />
       </>
    )
 }

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({
+                  setShowModal(true)
-                     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()
-                     }
-                  })
                }
-            }
+            }}
+         />
 
+         <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"
          />
       </>
    )

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({
+                     setTimeout(() => {
-                        title: 'Konfirmasi',
+                        setShowDeleteModal(true)
-                        desc: 'Apakah anda yakin ingin menghapus data ini? Data ini akan mempengaruhi semua data yang terkait',
+                     }, 600)
-                        onPress: () => {
-                           handleDeleteCalendar()
-                        }
-                     })
                   }}
                />
             </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
+         />
       </>
    )
 }

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({
+                           setTimeout(() => {
-                              title: 'Konfirmasi',
+                              setModalConfig({
-                              desc: `Apakah anda yakin ingin ${status == 1 ? 'menutup' : 'membuka'} diskusi?`,
+                                 title: 'Konfirmasi',
-                              onPress: () => {
+                                 message: `Apakah anda yakin ingin ${status == 1 ? 'menutup' : 'membuka'} diskusi?`,
-                                 handleOpenClose()
+                                 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({
+                     setTimeout(() => {
-                        title: 'Konfirmasi',
+                        setModalConfig({
-                        desc: isActive ? 'Apakah anda yakin ingin mengarsipkan diskusi?' : 'Apakah anda yakin ingin mengaktifkan diskusi?',
+                           title: 'Konfirmasi',
-                        onPress: () => {
+                           message: isActive ? 'Apakah anda yakin ingin mengarsipkan diskusi?' : 'Apakah anda yakin ingin mengaktifkan diskusi?',
-                           handleArchive()
+                           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"
+         />
       </>
    )
 }

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

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({
+                     setTimeout(() => {
-                        title: 'Konfirmasi',
+                        setShowModal(true)
-                        desc: active ? 'Apakah anda yakin ingin menonaktifkan divisi?' : 'Apakah anda yakin ingin mengaktifkan divisi?',
+                     }, 600)
-                        onPress: () => { handleUpdateStatus() }
-                     })
                   }}
                />
             </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"
+         />
       </>
    )
 }

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({
+                     setShowDeleteModal(true)
-                        title: 'Konfirmasi',
-                        desc: 'Apakah anda yakin ingin menghapus data?',
-
-                        onPress: () => {
-                           onDone()
-                           Toast.show({ type: 'small', text1: 'Berhasil menghapus data', })
-                        }
-                     })
                   }}
                   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
+         />
       </>
    )
 }

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({
+                     setTimeout(() => {
-                        title: 'Konfirmasi',
+                        setShowModal(true)
-                        desc: active ? 'Apakah anda yakin ingin menonaktifkan user?' : 'Apakah anda yakin ingin mengaktifkan user?',
+                     }, 600)
-                        onPress: () => {
-                           handleActive()
-                        }
-                     })
                   }}
                />
                <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"
+         />
       </>
    )
 }

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({
+                              setTimeout(() => {
-                                 title: 'Konfirmasi',
+                                 setShowDeleteModal(true)
-                                 desc: 'Apakah Anda yakin ingin menghapus kegiatan ini? Kegiatan yang dihapus tidak dapat dikembalikan',
+                              }, 600)
-                                 onPress: () => { handleDelete() }
-                              })
                            }}
                         />
                         :
@@ -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}

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({
+                           setTimeout(() => {
-                              title: 'Konfirmasi',
+                              setShowDeleteModal(true)
-                              desc: 'Apakah Anda yakin ingin menghapus file ini? File yang dihapus tidak dapat dikembalikan',
+                           }, 600)
-                              onPress: () => {
-                                 handleDelete()
-                              }
-                           })
-
                         }}
                      />
                }
             </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
+         />
       </>
    )
 }

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({
+                                 setTimeout(() => {
-                                    title: 'Konfirmasi',
+                                    setShowDeleteModal(true)
-                                    desc: 'Apakah Anda yakin ingin menghapus link ini? Link yang dihapus tidak dapat dikembalikan',
+                                 }, 600)
-                                    onPress: () => {
-                                       handleDelete()
-                                    }
-                                 })
-
                               }}
                            />
                      }
                   </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
+               />
             </>
          }
       </>

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({
+                        setTimeout(() => {
-                           title: "Konfirmasi",
+                           setShowDeleteModal(true)
-                           desc: "Apakah Anda yakin ingin mengeluarkan anggota?",
+                        }, 600)
-                           onPress: () => { handleDeleteMember() },
-                        });
                      }}
                   />
                }
             </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
+         />
       </>
    );
 }

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({
+                     setTimeout(() => {
-                        title: "Konfirmasi",
+                        setShowDeleteModal(true)
-                        desc: "Apakah anda yakin ingin menghapus data ini?",
+                     }, 600)
-                        onPress: () => { handleDelete() },
-                     });
                   }}
                />
             </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) }}

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({
+                              setTimeout(() => {
-                                 title: 'Konfirmasi',
+                                 setShowDeleteModal(true)
-                                 desc: 'Apakah Anda yakin ingin menghapus tugas ini? Tugas yang dihapus tidak dapat dikembalikan',
+                              }, 600)
-                                 onPress: () => { handleDelete() }
-                              })
                            }}
                         />
 
@@ -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}

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({
+                           setTimeout(() => {
-                              title: 'Konfirmasi',
+                              setShowDeleteModal(true)
-                              desc: 'Apakah Anda yakin ingin menghapus file ini? File yang dihapus tidak dapat dikembalikan',
+                           }, 600)
-                              onPress: () => {
-                                 handleDelete()
-                              }
-                           })
-
                         }}
                      />
                      :
@@ -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
+         />
       </>
    )
 }

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({
+                                 setTimeout(() => {
-                                    title: 'Konfirmasi',
+                                    setShowDeleteModal(true)
-                                    desc: 'Apakah Anda yakin ingin menghapus link ini? Link yang dihapus tidak dapat dikembalikan',
+                                 }, 600)
-                                    onPress: () => { handleDelete() }
-                                 })
                               }}
                            />
                            :
@@ -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
+               />
             </>
          }
       </>

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({
+                           setTimeout(() => {
-                              title: "Konfirmasi",
+                              setShowDeleteModal(true)
-                              desc: "Apakah Anda yakin ingin mengeluarkan anggota?",
+                           }, 600)
-                              onPress: () => { handleDeleteMember() },
-                           });
                         }}
                      />
                      :
@@ -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
+         />
       </>
    );
 }

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({
+                           setTimeout(() => {
-                              title: 'Konfirmasi',
+                              setShowDeleteModal(true)
-                              desc: 'Apakah anda yakin ingin menghapus data ini?',
+                           }, 600)
-                              onPress: () => {
-                                 handleDelete()
-                              }
-                           })
-
                         }}
                      />
                   </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)}

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;