From 64aaafa2bee2fe14afd92ba6e3fe161a1e93d782 Mon Sep 17 00:00:00 2001
From: amaliadwiy <iam.amaliadwi@gmail.com>
Date: Wed, 18 Feb 2026 15:45:45 +0800
Subject: [PATCH] upd: setting

Deskripsi:
- buat halaman setting
- isinya edit profile, ganti tema aplikasi, nonaktifkan notifikasi, sign out

No Issues
---
 app/(application)/_layout.tsx       |  12 ++
 app/(application)/edit-profile.tsx  |  48 ++++---
 app/(application)/profile.tsx       |  92 +-------------
 app/(application)/setting/index.tsx | 186 ++++++++++++++++++++++++++++
 components/buttonSetting.tsx        |  33 +++++
 lib/useNotification.ts              |  27 +++-
 6 files changed, 294 insertions(+), 104 deletions(-)
 create mode 100644 app/(application)/setting/index.tsx
 create mode 100644 components/buttonSetting.tsx

diff --git a/app/(application)/_layout.tsx b/app/(application)/_layout.tsx
index 57cced1..5d77e94 100644
--- a/app/(application)/_layout.tsx
+++ b/app/(application)/_layout.tsx
@@ -112,6 +112,18 @@ export default function RootLayout() {
                )
             }} />
             <Stack.Screen name="profile" options={{ title: 'Profile' }} />
+            <Stack.Screen name="setting/index" options={{
+               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               title: 'Pengaturan',
+               headerTitleAlign: 'center',
+               // headerRight: () => <HeaderRightProjectList />
+               header: () => (
+                  <AppHeader title="Pengaturan"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                  />
+               )
+            }} />
             <Stack.Screen name="member/index" options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                title: 'Anggota',
diff --git a/app/(application)/edit-profile.tsx b/app/(application)/edit-profile.tsx
index 6b32dda..3157aa4 100644
--- a/app/(application)/edit-profile.tsx
+++ b/app/(application)/edit-profile.tsx
@@ -1,4 +1,4 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import AppHeader from "@/components/AppHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import { InputForm } from "@/components/inputForm";
 import ModalSelect from "@/components/modalSelect";
@@ -219,24 +219,40 @@ export default function EditProfile() {
       <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
-               headerLeft: () => (
-                  <ButtonBackHeader
-                     onPress={() => {
-                        router.back();
-                     }}
-                  />
-               ),
+               // headerLeft: () => (
+               //    <ButtonBackHeader
+               //       onPress={() => {
+               //          router.back();
+               //       }}
+               //    />
+               // ),
                headerTitle: "Edit Profile",
                headerTitleAlign: "center",
-               headerRight: () => (
-                  <ButtonSaveHeader
-                     disable={disableBtn || loading ? true : false}
-                     category="update"
-                     onPress={() => {
-                        handleEdit()
-                     }}
+               header: () => (
+                  <AppHeader
+                     title="Edit Profile"
+                     showBack={true}
+                     onPressLeft={() => router.back()}
+                     right={
+                        <ButtonSaveHeader
+                           disable={disableBtn || loading ? true : false}
+                           category="update"
+                           onPress={() => {
+                              handleEdit()
+                           }}
+                        />
+                     }
                   />
-               ),
+               )
+               // headerRight: () => (
+               //    <ButtonSaveHeader
+               //       disable={disableBtn || loading ? true : false}
+               //       category="update"
+               //       onPress={() => {
+               //          handleEdit()
+               //       }}
+               //    />
+               // ),
             }}
          />
          <KeyboardAvoidingView
diff --git a/app/(application)/profile.tsx b/app/(application)/profile.tsx
index ff7e115..501ffb9 100644
--- a/app/(application)/profile.tsx
+++ b/app/(application)/profile.tsx
@@ -1,4 +1,3 @@
-import ModalConfirmation from "@/components/ModalConfirmation";
 import AppHeader from "@/components/AppHeader";
 import { ButtonHeader } from "@/components/buttonHeader";
 import ItemDetailMember from "@/components/itemDetailMember";
@@ -6,40 +5,20 @@ import Text from "@/components/Text";
 import { assetUserImage } from "@/constants/AssetsError";
 import { ConstEnv } from "@/constants/ConstEnv";
 import Styles from "@/constants/Styles";
-import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
-import { AntDesign, Ionicons } from "@expo/vector-icons";
-import { router, Stack } from "expo-router";
+import { Feather, Ionicons } from "@expo/vector-icons";
 import { LinearGradient } from "expo-linear-gradient";
+import { router, Stack } from "expo-router";
 import { useState } from "react";
 import { Image, Modal, Pressable, SafeAreaView, ScrollView, TouchableOpacity, View } from "react-native";
 import ImageViewing from 'react-native-image-viewing';
 import { useSelector } from 'react-redux';
 
 export default function Profile() {
-   const { signOut } = useAuthSession()
-   const { theme, setTheme, colors } = useTheme();
+   const { colors } = useTheme();
    const entities = useSelector((state: any) => state.entities)
    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
-         style={[Styles.itemSelectModal, { backgroundColor: theme === value ? colors.primary + '10' : 'transparent', borderColor: colors.icon + '20' }]}
-         onPress={() => {
-            setTheme(value);
-            setShowThemeModal(false);
-         }}
-      >
-         <View style={Styles.rowItemsCenter}>
-            <Ionicons name={icon as any} size={20} color={theme === value ? colors.primary : colors.text} style={{ marginRight: 10 }} />
-            <Text style={{ color: colors.text, fontWeight: theme === value ? 'bold' : 'normal' }}>{label}</Text>
-         </View>
-         {theme === value && <Ionicons name="checkmark" size={20} color={colors.primary} />}
-      </TouchableOpacity>
-   );
 
    return (
       <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
@@ -54,9 +33,9 @@ export default function Profile() {
                      onPressLeft={() => router.back()}
                      right={
                         <ButtonHeader
-                           item={<AntDesign name="logout" size={20} color="white" />}
+                           item={<Feather name="settings" size={20} color="white" />}
                            onPress={() => {
-                              setShowLogoutModal(true)
+                              router.push('/setting')
                            }}
                         />
                      }
@@ -81,31 +60,8 @@ export default function Profile() {
                   <Text style={[Styles.textMediumNormal, Styles.cWhite]}>{entities.role}</Text>
                </LinearGradient>
                <View style={[Styles.p15]}>
-                  <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
-                     <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Tampilan</Text>
-                  </View>
-
-                  <TouchableOpacity
-                     onPress={() => setShowThemeModal(true)}
-                     style={[Styles.wrapItemBorderAll, { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderColor: colors.icon + '40', backgroundColor: colors.background }]}
-                  >
-                     <View style={Styles.rowItemsCenter}>
-                        <Ionicons name="color-palette-outline" size={20} color={colors.text} style={{ marginRight: 10 }} />
-                        <Text style={{ color: colors.text }}>Tema Aplikasi</Text>
-                     </View>
-                     <View style={Styles.rowItemsCenter}>
-                        <Text style={{ color: colors.icon, marginRight: 5, fontSize: 13 }}>
-                           {theme === 'light' ? 'Terang' : theme === 'dark' ? 'Gelap' : 'Sistem'}
-                        </Text>
-                        <Ionicons name="chevron-forward" size={16} color={colors.icon} />
-                     </View>
-                  </TouchableOpacity>
-
-                  <View style={[Styles.rowSpaceBetween, Styles.mt15]}>
+                  <View style={[Styles.rowSpaceBetween]}>
                      <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Informasi</Text>
-                     {
-                        entities.idUserRole != "developer" && <Text onPress={() => { router.push('/edit-profile') }} style={[Styles.textLink]}>Edit</Text>
-                     }
                   </View>
                   {/* Note: ItemDetailMember might need updates to support dynamic colors if it uses default text colors */}
                   <ItemDetailMember category="nik" value={entities.nik} />
@@ -118,29 +74,6 @@ export default function Profile() {
             </View>
          </ScrollView>
 
-         <Modal
-            animationType="fade"
-            transparent={true}
-            visible={showThemeModal}
-            onRequestClose={() => setShowThemeModal(false)}
-         >
-            <TouchableOpacity style={Styles.modalBgTransparant} activeOpacity={1} onPress={() => setShowThemeModal(false)}>
-               <View style={[Styles.modalContent, { backgroundColor: colors.background }]}>
-                  <View style={[Styles.titleContainer, { backgroundColor: colors.background, borderBottomColor: colors.icon + '20', borderBottomWidth: 1 }]}>
-                     <Text style={[Styles.textSubtitle, { color: colors.text }]}>Pilih Tema</Text>
-                     <TouchableOpacity onPress={() => setShowThemeModal(false)}>
-                        <Ionicons name="close" size={24} color={colors.text} />
-                     </TouchableOpacity>
-                  </View>
-                  <View style={{ padding: 10 }}>
-                     <ThemeOption label="Terang" value="light" icon="sunny-outline" />
-                     <ThemeOption label="Gelap" value="dark" icon="moon-outline" />
-                     <ThemeOption label="Sistem" value="system" icon="phone-portrait-outline" />
-                  </View>
-               </View>
-            </TouchableOpacity>
-         </Modal>
-
          <ImageViewing
             images={[{ uri: error ? assetUserImage.uri : `${ConstEnv.url_storage}/files/${entities.img}` }]}
             imageIndex={0}
@@ -148,19 +81,6 @@ 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"
-         />
       </SafeAreaView>
    )
 }
\ No newline at end of file
diff --git a/app/(application)/setting/index.tsx b/app/(application)/setting/index.tsx
new file mode 100644
index 0000000..0a25d8e
--- /dev/null
+++ b/app/(application)/setting/index.tsx
@@ -0,0 +1,186 @@
+import ModalConfirmation from "@/components/ModalConfirmation";
+import Text from "@/components/Text";
+import ButtonSetting from "@/components/buttonSetting";
+import DrawerBottom from "@/components/drawerBottom";
+import Styles from "@/constants/Styles";
+import { apiRegisteredToken, apiUnregisteredToken } from "@/lib/api";
+import { checkPermission, getToken, openSettings, requestPermission } from "@/lib/useNotification";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
+import { Feather, Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { useCallback, useEffect, useState } from "react";
+import { AppState, AppStateStatus, Pressable, View } from "react-native";
+import { useSelector } from "react-redux";
+
+export default function ListSetting() {
+   const { theme, setTheme, colors } = useTheme()
+   const { signOut } = useAuthSession()
+   const [isNotificationEnabled, setIsNotificationEnabled] = useState<boolean | null>(null);
+   const entities = useSelector((state: any) => state.entities)
+   const [modalVisible, setModalVisible] = useState(false);
+   const [modalConfig, setModalConfig] = useState({
+      title: '',
+      message: '',
+      confirmText: 'Buka Pengaturan',
+      onConfirm: () => { }
+   });
+
+   const [showLogoutModal, setShowLogoutModal] = useState(false)
+   const [showThemeModal, setShowThemeModal] = useState(false)
+
+   const registerToken = async () => {
+      try {
+         const token = await getToken();
+         if (token) {
+            await apiRegisteredToken({ user: entities.id, token });
+         }
+      } catch (error) {
+         console.warn('Error registering token:', error);
+      }
+   };
+
+   const unregisterToken = async () => {
+      try {
+         const token = await getToken();
+         if (token) {
+            await apiUnregisteredToken({ user: entities.id, token });
+         }
+      } catch (error) {
+         console.warn('Error unregistering token:', error);
+      }
+   };
+
+   const checkNotif = useCallback(async () => {
+      const status = await checkPermission();
+      setIsNotificationEnabled((prev) => {
+         if (prev === false && status === true) {
+            registerToken();
+         } else if (prev === true && status === false) {
+            unregisterToken();
+         }
+         return !!status;
+      });
+   }, [entities.id]);
+
+   useEffect(() => {
+      checkNotif();
+
+      const subscription = AppState.addEventListener('change', (nextAppState: AppStateStatus) => {
+         if (nextAppState === 'active') {
+            checkNotif();
+         }
+      });
+
+      return () => {
+         subscription.remove();
+      };
+   }, [checkNotif]);
+
+   const handleToggleNotif = async () => {
+      if (isNotificationEnabled) {
+         setModalConfig({
+            title: "Matikan Notifikasi?",
+            message: "Anda akan diarahkan ke pengaturan sistem untuk mematikan notifikasi.",
+            confirmText: "Buka Pengaturan",
+            onConfirm: () => {
+               setModalVisible(false);
+               openSettings();
+            }
+         });
+         setModalVisible(true);
+      } else {
+         const granted = await requestPermission();
+         if (granted) {
+            setIsNotificationEnabled(true);
+            registerToken();
+         } else {
+            setModalConfig({
+               title: "Aktifkan Notifikasi?",
+               message: "Izin notifikasi tidak diberikan. Buka pengaturan sistem untuk mengaktifkannya?",
+               confirmText: "Buka Pengaturan",
+               onConfirm: () => {
+                  setModalVisible(false);
+                  openSettings();
+               }
+            });
+            setModalVisible(true);
+         }
+      }
+   };
+
+   const ThemeOption = ({ label, value, icon }: { label: string, value: 'light' | 'dark' | 'system', icon: string }) => (
+      <Pressable
+         style={[Styles.itemSelectModal, { borderColor: colors.icon + '20' }]}
+         onPress={() => {
+            setTheme(value);
+         }}
+      >
+         <View style={Styles.rowItemsCenter}>
+            <Ionicons name={icon as any} size={20} color={colors.text} style={{ marginRight: 10 }} />
+            <Text style={{ color: colors.text }}>{label}</Text>
+         </View>
+         {theme === value && <Ionicons name="checkmark" size={20} color={colors.text} />}
+      </Pressable>
+   );
+
+   return (
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+         <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }, Styles.p0, Styles.round05]}>
+            {
+               entities.idUserRole != "developer" &&
+               <ButtonSetting
+                  title="Edit Profile"
+                  icon={<Feather name="user" size={20} color={colors.text} />}
+                  onPress={() => { router.push('/edit-profile') }}
+               />
+            }
+            <ButtonSetting
+               title="Tema Aplikasi"
+               icon={<Ionicons name="color-palette-outline" size={20} color={colors.text} />}
+               onPress={() => setShowThemeModal(true)}
+               value={theme === 'light' ? 'Terang' : theme === 'dark' ? 'Gelap' : 'Sistem'}
+            />
+            <ButtonSetting
+               title="Notifikasi"
+               icon={<Feather name="bell" size={20} color={colors.text} />}
+               onPress={handleToggleNotif}
+               value={isNotificationEnabled === null ? 'Memuat...' : isNotificationEnabled ? 'Aktif' : 'Nonaktif'}
+            />
+            <ButtonSetting
+               title="Keluar"
+               icon={<Feather name="log-out" size={20} color={colors.text} />}
+               onPress={() => setShowLogoutModal(true)}
+               borderBottom={false}
+            />
+         </View>
+
+         <ModalConfirmation
+            visible={modalVisible}
+            title={modalConfig.title}
+            message={modalConfig.message}
+            confirmText={modalConfig.confirmText}
+            onConfirm={modalConfig.onConfirm}
+            onCancel={() => setModalVisible(false)}
+         />
+
+         <ModalConfirmation
+            visible={showLogoutModal}
+            title="Keluar"
+            message="Apakah anda yakin ingin keluar?"
+            onConfirm={() => {
+               setShowLogoutModal(false)
+               signOut()
+            }}
+            onCancel={() => setShowLogoutModal(false)}
+            confirmText="Keluar"
+            cancelText="Batal"
+         />
+         <DrawerBottom animation="slide" isVisible={showThemeModal} setVisible={setShowThemeModal} title="Tema Aplikasi">
+            <ThemeOption label="Terang" value="light" icon="sunny-outline" />
+            <ThemeOption label="Gelap" value="dark" icon="moon-outline" />
+            <ThemeOption label="Sistem" value="system" icon="phone-portrait-outline" />
+         </DrawerBottom>
+      </View>
+   )
+}
\ No newline at end of file
diff --git a/components/buttonSetting.tsx b/components/buttonSetting.tsx
new file mode 100644
index 0000000..419b227
--- /dev/null
+++ b/components/buttonSetting.tsx
@@ -0,0 +1,33 @@
+import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
+import { ReactNode } from "react";
+import { Pressable, View } from "react-native";
+import Text from "./Text";
+
+type Props = {
+   title: string
+   onPress?: () => void,
+   icon?: ReactNode,
+   borderBottom?: boolean
+   value?: string
+}
+
+export default function ButtonSetting({ title, onPress, icon, borderBottom = true, value }: Props) {
+   const { colors } = useTheme();
+   return (
+      <Pressable onPress={onPress}>
+         <View style={[
+            Styles.p10,
+            Styles.rowSpaceBetween,
+            { borderBottomWidth: borderBottom ? 1 : 0, borderColor: colors.icon + '20' },
+         ]}>
+            <View style={[Styles.rowItemsCenter]}>
+               {icon}
+               <Text style={[{ color: colors.text }, Styles.ml05]}>{title}</Text>
+            </View>
+            {value && <Text style={[{ color: colors.dimmed }]}>{value}</Text>}
+         </View>
+      </Pressable>
+   )
+
+}
\ No newline at end of file
diff --git a/lib/useNotification.ts b/lib/useNotification.ts
index 4af6e44..7a9ac7c 100644
--- a/lib/useNotification.ts
+++ b/lib/useNotification.ts
@@ -6,8 +6,7 @@ import {
 } from '@react-native-firebase/messaging';
 import * as Notifications from 'expo-notifications';
 import { useEffect } from 'react';
-import { PermissionsAndroid, Platform } from 'react-native';
-
+import { Linking, PermissionsAndroid, Platform } from 'react-native';
 import { ConstEnv } from '@/constants/ConstEnv';
 
 const RNfirebaseConfig = {
@@ -38,6 +37,30 @@ const initializeFirebase = async () => {
    }
 };
 
+export const checkPermission = async () => {
+   try {
+      if (Platform.OS === 'android') {
+         return await PermissionsAndroid.check(
+            PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS
+         );
+      } else if (Platform.OS === 'ios') {
+         const { status } = await Notifications.getPermissionsAsync();
+         return status === 'granted';
+      }
+   } catch (err) {
+      console.warn('Error checking notification permissions:', err);
+      return false;
+   }
+};
+
+export const openSettings = () => {
+   if (Platform.OS === 'ios') {
+      Linking.openURL('app-settings:');
+   } else {
+      Linking.openSettings();
+   }
+};
+
 export const requestPermission = async () => {
    try {
       if (Platform.OS === 'android') {