Merge pull request 'amalia/19-feb-26' (#26) from amalia/19-feb-26 into join

Reviewed-on: #26

app/(application)/_layout.tsx

@@ -20,10 +20,12 @@ import { StatusBar } from 'expo-status-bar';
 import { useEffect } from "react";
 import { Easing, Notifier } from 'react-native-notifier';
 import { Provider } from "react-redux";
+import { useTheme } from "@/providers/ThemeProvider";
 
 export default function RootLayout() {
    const { token, decryptToken, isLoading } = useAuthSession()
    const pathname = usePathname()
+   const { colors } = useTheme()
 
    async function handleReadNotification(id: string, category: string, idContent: string, title: string) {
       try {
@@ -93,11 +95,10 @@ export default function RootLayout() {
          <Stack screenOptions={{
             headerShown: true,
             animation: "slide_from_right",
-
-            // ⬇️ PENTING BANGET
             animationTypeForReplace: "pop",
             fullScreenGestureEnabled: true,
             gestureEnabled: true,
+            contentStyle: { backgroundColor: colors.header },
          }} >
             <Stack.Screen name="home" options={{ title: 'Home' }} />
             <Stack.Screen name="feature" options={{ title: 'Fitur' }} />

app/(application)/announcement/[id].tsx

@@ -177,7 +177,7 @@ export default function DetailAnnouncement() {
    };
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -211,7 +211,7 @@ export default function DetailAnnouncement() {
                         <View>
                            <View style={[Styles.rowOnly]}>
                               <Skeleton width={30} height={30} borderRadius={10} />
-                              <View style={[{ flex: 1 }, Styles.ph05]}>
+                              <View style={[Styles.flex1, Styles.ph05]}>
                                  <Skeleton width={100} widthType="percent" height={30} borderRadius={10} />
                               </View>
                            </View>
@@ -221,7 +221,7 @@ export default function DetailAnnouncement() {
                         </View>
                         :
                         <>
-                           <View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
+                           <View style={[Styles.rowOnly, Styles.alignStart]}>
                               <MaterialIcons name="campaign" size={25} color={colors.text} style={[Styles.mr05]} />
                               <Text style={[Styles.textDefaultSemiBold, Styles.w90, Styles.mt02]}>{data?.title}</Text>
                            </View>
@@ -318,7 +318,7 @@ export default function DetailAnnouncement() {
                      accessibilityRole="button"
                      accessibilityLabel="Close image viewer"
                   >
-                     <Text style={{ color: 'white', fontSize: 26 }}>✕</Text>
+                     <Text style={[Styles.textWhite, Styles.font26]}>✕</Text>
                   </Pressable>
 
                   {/* MENU */}
@@ -328,17 +328,17 @@ export default function DetailAnnouncement() {
                      accessibilityLabel="Download or share image"
                      disabled={loadingOpen}
                   >
-                     <Text style={{ color: loadingOpen ? 'gray' : 'white', fontSize: 26 }}>⋯</Text>
+                     <Text style={[{ color: loadingOpen ? 'gray' : 'white' }, Styles.font26]}>⋯</Text>
                   </Pressable>
                </View>
             )}
             FooterComponent={({ imageIndex }) => (
-               <View style={{
+               <View style={[
-                  paddingBottom: 20,
+                  Styles.pb20,
-                  paddingHorizontal: 16,
+                  Styles.ph16,
-                  alignItems: 'center',
+                  Styles.alignCenter,
-               }}>
+               ]}>
-                  <Text style={{ color: 'white', fontSize: 16 }}>{chooseFile?.name}.{chooseFile?.extension}</Text>
+                  <Text style={[Styles.textWhite, Styles.font16]}>{chooseFile?.name}.{chooseFile?.extension}</Text>
                </View>
             )}
          />

app/(application)/announcement/create.tsx

@@ -17,7 +17,7 @@ import { Entypo, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
 import { router, Stack } from "expo-router";
 import React, { useEffect, useState } from "react";
-import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
+import { SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -131,7 +131,7 @@ export default function CreateAnnouncement() {
    }
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -281,15 +281,4 @@ export default function CreateAnnouncement() {
    );
 }
 
-const styles = StyleSheet.create({
+
-   container: {
-      padding: 20,
-   },
-   textArea: {
-      height: 100, // Or use flex-based sizing
-      borderColor: 'gray',
-      borderWidth: 1,
-      padding: 10,
-      textAlignVertical: 'top', // Important for Android to align text at the top
-   },
-});

app/(application)/announcement/index.tsx

@@ -85,11 +85,11 @@ export default function Announcement() {
    })
 
    return (
-      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
          <View>
             <InputSearch onChange={setSearch} />
          </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <View style={[Styles.flex2, Styles.mt05]}>
             {
                loading ?
                   arrSkeleton.map((item, index) => {
@@ -113,7 +113,7 @@ export default function Announcement() {
                                  bgColor="transparent"
                                  icon={
                                     // <View style={[Styles.iconContent]}>
-                                       <MaterialIcons name="campaign" size={25} color={'white'} />
+                                    <MaterialIcons name="campaign" size={25} color={colors.text} />
                                     // </View>
                                  }
                                  title={item.title}
@@ -135,7 +135,7 @@ export default function Announcement() {
                         }
                      />
                      :
-                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada pengumuman</Text>
+                     <Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada pengumuman</Text>
             }
          </View>
       </View>

app/(application)/banner/[id].tsx

@@ -114,7 +114,7 @@ export default function EditBanner() {
    };
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -156,7 +156,7 @@ export default function EditBanner() {
                                  ? selectedImage
                                  : selectedImage.uri
                            }
-                           style={{ resizeMode: "contain", width: "100%", height: 100 }}
+                           style={[Styles.resizeContain, Styles.w100, { height: 100 }]}
                         />
                      </Pressable>
                   ) : (
@@ -165,7 +165,7 @@ export default function EditBanner() {
                         style={[Styles.wrapPaper, Styles.contentItemCenter]}
                      >
                         <View
-                           style={{ justifyContent: "center", alignItems: "center" }}
+                           style={[Styles.contentItemCenter]}
                         >
                            <Entypo name="image" size={50} color={"#aeaeae"} />
                            <Text style={[Styles.textInformation, Styles.mt05]}>

app/(application)/banner/create.tsx

@@ -96,7 +96,7 @@ export default function CreateBanner() {
    };
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -142,7 +142,7 @@ export default function CreateBanner() {
                      <Pressable onPress={pickImageAsync}>
                         <Image
                            src={selectedImage}
-                           style={{ resizeMode: "contain", width: "100%", height: 100 }}
+                           style={[Styles.resizeContain, Styles.w100, { height: 100 }]}
                         />
                      </Pressable>
                   ) : (
@@ -151,7 +151,7 @@ export default function CreateBanner() {
                         style={[Styles.wrapPaper, Styles.contentItemCenter]}
                      >
                         <View
-                           style={{ justifyContent: "center", alignItems: "center" }}
+                           style={[Styles.contentItemCenter]}
                         >
                            <Entypo name="image" size={50} color={"#aeaeae"} />
                            <Text style={[Styles.textInformation, Styles.mt05]}>

app/(application)/banner/index.tsx

@@ -108,7 +108,7 @@ export default function BannerList() {
 
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -158,13 +158,12 @@ export default function BannerList() {
                               />
                            }
                            title={index.title}
-                           width={65}
                         />
                      ))}
                   </View>
                   :
                   <View style={[Styles.p15, Styles.mb100]}>
-                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, Styles.textCenter]}>Tidak ada data</Text>
                   </View>
             }
 

app/(application)/discussion/[id].tsx

@@ -239,7 +239,7 @@ export default function DetailDiscussionGeneral() {
                )
             }}
          />
-         <View style={{ flex: 1, backgroundColor: colors.background }}>
+         <View style={[Styles.flex1, { backgroundColor: colors.background }]}>
             <ScrollView
                showsVerticalScrollIndicator={false}
                style={[Styles.h100, { backgroundColor: colors.background }]}
@@ -259,7 +259,8 @@ export default function DetailDiscussionGeneral() {
                         <BorderBottomItem2
                            dataFile={fileDiscussion}
                            descEllipsize={false}
-                           borderType="bottom"
+                           borderType="all"
+                           bgColor="white"
                            icon={
                               <View style={[Styles.iconContent]}>
                                  <MaterialIcons name="chat" size={25} color={'black'} />
@@ -287,7 +288,7 @@ export default function DetailDiscussionGeneral() {
                            }
                         />
                   }
-                  <View style={[Styles.p15]}>
+                  <View style={[Styles.mt10]}>
                      {
                         loadingKomentar ?
                            arrSkeleton.map((item: any, i: number) => {
@@ -300,7 +301,7 @@ export default function DetailDiscussionGeneral() {
                               return (
                                  <BorderBottomItem
                                     key={i}
-                                    borderType="bottom"
+                                    borderType="all"
                                     colorPress
                                     icon={
                                        <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
@@ -310,7 +311,7 @@ export default function DetailDiscussionGeneral() {
                                     desc={item.comment}
                                     rightBottomInfo={item.isEdited ? "Edited" : ""}
                                     descEllipsize={detailMore.includes(item.id) ? false : true}
-                                    bgColor="transparent"
+                                    bgColor="white"
                                     onPress={() => {
                                        setDetailMore((prev: any) => {
                                           if (prev.includes(item.id)) {
@@ -401,7 +402,7 @@ export default function DetailDiscussionGeneral() {
                               }
                            />
                            :
-                           <View style={[Styles.pv20, { alignItems: 'center' }]}>
+                           <View style={[Styles.pv20, Styles.itemsCenter]}>
                               <Text style={[Styles.textInformation, { color: colors.dimmed }]}>
                                  {
                                     data?.status == 2 ? "Diskusi telah ditutup" : data?.isActive == false ? "Diskusi telah diarsipkan" : "Hanya anggota diskusi yang dapat memberikan komentar"

app/(application)/discussion/add-member/[id].tsx

@@ -127,7 +127,7 @@ export default function AddMemberDiscussionDetail() {
                )
             }}
          />
-         <View style={[Styles.p15, {flex: 1,  backgroundColor: colors.background }]}>
+         <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
             <InputSearch onChange={setSearch} value={search} />
 
             {
@@ -149,7 +149,7 @@ export default function AddMemberDiscussionDetail() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, Styles.pv05, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.pv05, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
             }
             <ScrollView
                showsVerticalScrollIndicator={false}
@@ -172,7 +172,7 @@ export default function AddMemberDiscussionDetail() {
                                  <View style={[Styles.ml10]}>
                                     <Text style={[Styles.textDefault]}>{item.name}</Text>
                                     {
-                                       found && <Text style={[Styles.textInformation, {color: colors.dimmed}]}>sudah menjadi anggota</Text>
+                                       found && <Text style={[Styles.textInformation, { color: colors.dimmed }]}>sudah menjadi anggota</Text>
                                     }
                                  </View>
                               </View>
@@ -184,7 +184,7 @@ export default function AddMemberDiscussionDetail() {
                      }
                      )
                      :
-                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, Styles.textCenter]}>Tidak ada data</Text>
                }
             </ScrollView>
          </View>

app/(application)/discussion/create.tsx

@@ -165,7 +165,7 @@ export default function CreateDiscussionGeneral() {
    }
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -207,7 +207,7 @@ export default function CreateDiscussionGeneral() {
             }}
          />
          <LoadingOverlay visible={loading} />
-         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, { backgroundColor: colors.background }]}>
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}>
             <View style={[Styles.p15, Styles.mb100]}>
                {
                   (entityUser.role == "supadmin" ||

app/(application)/discussion/edit/[id].tsx

@@ -164,7 +164,7 @@ export default function EditDiscussionGeneral() {
    }
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -200,7 +200,7 @@ export default function EditDiscussionGeneral() {
             }}
          />
          <LoadingOverlay visible={loading} />
-         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, { backgroundColor: colors.background }]}>
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}>
             <View style={[Styles.p15]}>
                <InputForm
                   label="Judul"

app/(application)/discussion/index.tsx

@@ -99,7 +99,7 @@ export default function Discussion() {
    })
 
    return (
-      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
          <View>
             {
                entityUser.role != "user" && entityUser.role != "coadmin" &&
@@ -130,7 +130,7 @@ export default function Discussion() {
                </View>
             }
          </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <View style={[Styles.flex2, Styles.mt05]}>
             {
                loading ?
                   arrSkeleton.map((item: any, i: number) => {
@@ -153,9 +153,9 @@ export default function Discussion() {
                                  onPress={() => { router.push(`/discussion/${item.id}`) }}
                                  borderType="bottom"
                                  icon={
-                                    <View style={[Styles.iconContent]}>
+                                    // <View style={[Styles.iconContent]}>
-                                       <MaterialIcons name="chat" size={25} color={'black'} />
+                                    <MaterialIcons name="chat" size={25} color={colors.text} />
-                                    </View>
+                                    // </View>
                                  }
                                  title={item.title}
                                  subtitle={
@@ -187,7 +187,7 @@ export default function Discussion() {
                         }
                      />
                      :
-                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada data</Text>
             }
          </View>
       </View>

app/(application)/discussion/member/[id].tsx

@@ -75,7 +75,7 @@ export default function MemberDiscussionDetail() {
    }
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -90,7 +90,7 @@ export default function MemberDiscussionDetail() {
                )
             }}
          />
-         <ScrollView style={{ backgroundColor: colors.background }}>
+         <ScrollView style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}>
             <View style={[Styles.p15]}>
                <Text style={[Styles.textDefault, Styles.mv05]}>{data.length} Anggota</Text>
                <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>

app/(application)/division/[id]/(fitur-division)/calendar/create-member.tsx

@@ -156,7 +156,7 @@ export default function CreateCalendarAddMember() {
                         return (
                            <Pressable
                               key={index}
-                              style={[Styles.itemSelectModal, {borderColor: colors.icon + '20'}]}
+                              style={[Styles.itemSelectModal, { borderColor: colors.icon + '20' }]}
                               onPress={() => { onChoose(item.idUser, item.name, item.img) }}
                            >
                               <View style={[Styles.rowItemsCenter, Styles.w70]}>

app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx

@@ -327,7 +327,8 @@ export default function DiscussionDetail() {
                         <BorderBottomItem2
                            dataFile={fileDiscussion}
                            descEllipsize={false}
-                           borderType="bottom"
+                           bgColor="white"
+                           borderType="all"
                            icon={
                               <ImageUser
                                  src={`${ConstEnv.url_storage}/files/${data?.user_img}`}
@@ -364,7 +365,7 @@ export default function DiscussionDetail() {
                         />
                   }
 
-                  <View style={[Styles.p15]}>
+                  <View style={[Styles.mt10]}>
                      {
                         loadingKomentar ?
                            arrSkeleton.map((item, index) => (
@@ -374,7 +375,7 @@ export default function DiscussionDetail() {
                            dataComment.map((item, index) => (
                               <BorderBottomItem
                                  key={index}
-                                 borderType="bottom"
+                                 borderType="all"
                                  colorPress
                                  icon={
                                     <ImageUser
@@ -387,7 +388,7 @@ export default function DiscussionDetail() {
                                  desc={item.comment}
                                  rightBottomInfo={item.isEdited ? "Edited" : ""}
                                  descEllipsize={detailMore.includes(item.id) ? false : true}
-                                 bgColor="transparent"
+                                 bgColor="white"
                                  onPress={() => {
                                     setDetailMore((prev: any) => {
                                        if (prev.includes(item.id)) {
@@ -465,8 +466,8 @@ export default function DiscussionDetail() {
                                        size={25}
                                        style={
                                           [selectKomentar.comment == "" || regexOnlySpacesOrEnter.test(selectKomentar.comment) || loadingSend || ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision)
-                                             ? Styles.cGray
+                                             ? { color: colors.dimmed }
-                                             : Styles.cDefault,
+                                             : { color: colors.tint },
                                           ]
                                        }
                                     />
@@ -479,7 +480,6 @@ export default function DiscussionDetail() {
                            isMemberDivision)
                            ?
                            <InputForm
-                              bg={colors.card}
                               type="default"
                               round
                               multiline
@@ -512,8 +512,8 @@ export default function DiscussionDetail() {
                                        size={25}
                                        style={
                                           [komentar == "" || regexOnlySpacesOrEnter.test(komentar) || loadingSend || ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision)
-                                             ? Styles.cGray
+                                             ? { color: colors.dimmed }
-                                             : Styles.cDefault,
+                                             : { color: colors.tint }
                                           ]
                                        }
                                     />

app/(application)/division/[id]/(fitur-division)/discussion/index.tsx

@@ -177,7 +177,7 @@ export default function DiscussionDivision() {
                                  onPress={() => { router.push(`./discussion/${item.id}`) }}
                                  borderType="bottom"
                                  icon={
-                                    <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="sm" />
+                                    <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
                                  }
                                  title={item.user_name}
                                  subtitle={
@@ -209,7 +209,7 @@ export default function DiscussionDivision() {
                         }
                      />
                      :
-                     (<Text style={[Styles.textDefault, Styles.mv10, { textAlign: "center", color:colors.dimmed }]}>Tidak ada diskusi</Text>)
+                     (<Text style={[Styles.textDefault, Styles.mv10, { textAlign: "center", color: colors.dimmed }]}>Tidak ada diskusi</Text>)
             }
          </View>
       </View>

app/(application)/division/[id]/(fitur-division)/task/[detail]/report.tsx

@@ -89,7 +89,7 @@ export default function TaskDivisionReport() {
    }
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (

app/(application)/division/[id]/(fitur-division)/task/index.tsx

@@ -112,7 +112,7 @@ export default function ListTask() {
    })
 
    return (
-      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
          <View>
             <ScrollView horizontal style={[Styles.mb10]} showsHorizontalScrollIndicator={false}>
                <ButtonTab
@@ -190,7 +190,7 @@ export default function ListTask() {
          <View style={[Styles.mv05]}>
             <View style={[Styles.rowOnly]}>
                <Text style={[Styles.mr05]}>Filter :</Text>
-               <LabelStatus size="small" category="secondary" text={isYear} style={{ marginRight: 5 }} />
+               <LabelStatus size="small" category="secondary" text={isYear} style={[Styles.mr05]} />
             </View>
          </View>
          <View style={[{ flex: 2 }]}>
@@ -342,13 +342,13 @@ export default function ListTask() {
                         </View>
                      )
                   ) : (
-                     <Text style={[Styles.textDefault, { textAlign: "center", color: colors.dimmed }]} >
+                     <Text style={[Styles.textDefault, Styles.textCenter]} >
                         Tidak ada data
                      </Text>
                   )
 
             }
-         </View>
+         </View >
-      </View>
+      </View >
    );
 }

app/(application)/division/index.tsx

@@ -204,7 +204,7 @@ export default function ListDivision() {
                </View>
             )}
          </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <View style={[{ flex: 2 }, Styles.mt10]}>
             {
                loading ?
                   isList ?

app/(application)/edit-profile.tsx

@@ -216,7 +216,7 @@ export default function EditProfile() {
    };
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -262,7 +262,7 @@ export default function EditProfile() {
          >
             <ScrollView showsVerticalScrollIndicator={false}>
                <View style={[Styles.p15]}>
-                  <View style={{ justifyContent: "center", alignItems: "center" }}>
+                  <View style={[Styles.contentItemCenter]}>
                      {
                         selectedImage != undefined ? (
                            <Pressable onPress={pickImageAsync}>

app/(application)/group/index.tsx

@@ -150,7 +150,7 @@ export default function Index() {
             </WrapTab>
             <InputSearch onChange={setSearch} />
          </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <View style={[{ flex: 2 }, Styles.mt10]}>
             {
                loading ?
                   arrSkeleton.map((item, index) => {

app/(application)/home.tsx

@@ -49,7 +49,7 @@ export default function Home() {
    };
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                title: 'Home',
@@ -71,19 +71,21 @@ export default function Home() {
                />
             }
             showsVerticalScrollIndicator={false}
-            style={{ backgroundColor: colors.background }}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
          >
             <LinearGradient
                colors={[colors.header, colors.header, colors.header, colors.header, colors.homeGradient]}
-               style={{
+               style={[
-                  position: 'absolute',
+                  Styles.posAbsolute,
-                  width: Dimensions.get('window').width * 1.5,
+                  Styles.zIndexMinus1,
-                  height: Dimensions.get('window').width * 1.5,
+                  {
-                  borderRadius: Dimensions.get('window').width * 0.5,
+                     width: Dimensions.get('window').width * 1.5,
-                  top: -Dimensions.get('window').width * 1, // Positioned to show the bottom part of the circle as an arc
+                     height: Dimensions.get('window').width * 1.5,
-                  left: -Dimensions.get('window').width * 0.25,
+                     borderRadius: Dimensions.get('window').width * 0.5,
-                  zIndex: -1,
+                     top: -Dimensions.get('window').width * 1, // Positioned to show the bottom part of the circle as an arc
-               }}
+                     left: -Dimensions.get('window').width * 0.25,
+                  }
+               ]}
             />
             {/* <CaraouselHome refreshing={refreshing} /> */}
             <View style={[Styles.ph15]}>

app/(application)/member/[id].tsx

@@ -77,7 +77,7 @@ export default function MemberDetail() {
    };
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                headerTitle: 'Anggota',
@@ -119,7 +119,7 @@ export default function MemberDetail() {
                         <Pressable onPress={() => setPreview(true)}>
                            <ImageUser src={`${ConstEnv.url_storage}/files/${data?.img}`} size="lg" onError={setErrorImg} />
                         </Pressable>
-                        <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10, { textAlign: 'center' }]}>{data?.name}</Text>
+                        <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10, Styles.textCenter]}>{data?.name}</Text>
                         <Text style={[Styles.textMediumNormal, Styles.cWhite]}>{data?.role}</Text>
                      </>
 

app/(application)/member/create.tsx

@@ -208,7 +208,7 @@ export default function CreateMember() {
    };
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                headerTitle: "Tambah Anggota",
@@ -235,7 +235,7 @@ export default function CreateMember() {
          >
             <ScrollView showsVerticalScrollIndicator={false}>
                <View style={[Styles.p15]}>
-                  <View style={{ justifyContent: "center", alignItems: "center" }}>
+                  <View style={[Styles.contentItemCenter]}>
                      {selectedImage != undefined ? (
                         <Pressable onPress={pickImageAsync}>
                            <Image src={selectedImage} style={[Styles.userProfileBig]} />

app/(application)/member/edit/[id].tsx

@@ -238,7 +238,7 @@ export default function EditMember() {
    };
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                headerTitle: "Edit Anggota",
@@ -269,7 +269,7 @@ export default function EditMember() {
          >
             <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
                <View style={[Styles.p15]}>
-                  <View style={{ justifyContent: "center", alignItems: "center" }}>
+                  <View style={[Styles.contentItemCenter]}>
                      {
                         errorImg ?
                            <Pressable onPress={pickImageAsync}>

app/(application)/member/index.tsx

@@ -134,7 +134,7 @@ export default function Index() {
                </View>
             }
          </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <View style={[{ flex: 2 }, Styles.mt10]}>
             {
                loading ?
                   arrSkeleton.map((item, index) => {

app/(application)/notification.tsx

@@ -100,7 +100,7 @@ export default function Notification() {
    };
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <View style={[Styles.p15]}>
             {
                loading ?
@@ -148,7 +148,7 @@ export default function Notification() {
                         }
                      />
                      :
-                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada data</Text>
             }
          </View>
       </SafeAreaView>

app/(application)/position/index.tsx

@@ -1,4 +1,3 @@
-import ModalConfirmation from "@/components/ModalConfirmation";
 import BorderBottomItem from "@/components/borderBottomItem";
 import { ButtonForm } from "@/components/buttonForm";
 import ButtonTab from "@/components/buttonTab";
@@ -7,10 +6,10 @@ import { InputForm } from "@/components/inputForm";
 import InputSearch from "@/components/inputSearch";
 import LabelStatus from "@/components/labelStatus";
 import MenuItemRow from "@/components/menuItemRow";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from "@/components/Text";
 import WrapTab from "@/components/wrapTab";
-import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiDeletePosition, apiEditPosition, apiGetPosition } from "@/lib/api";
 import { setUpdatePosition } from "@/lib/positionSlice";
@@ -150,7 +149,7 @@ export default function Index() {
    });
 
    return (
-      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
          <View>
             <WrapTab>
                <ButtonTab
@@ -177,7 +176,7 @@ export default function Index() {
                </View>
             }
          </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <View style={[Styles.flex2, Styles.mt10]}>
             {
                loading ?
                   arrSkeleton.map((item, index) => {
@@ -221,7 +220,7 @@ export default function Index() {
                         }
                      />
                      :
-                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada data</Text>
             }
          </View>
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title={chooseData.name}>
@@ -251,7 +250,7 @@ export default function Index() {
 
 
          <DrawerBottom animation="none" keyboard height={30} backdropPressable={false} isVisible={isVisibleEdit} setVisible={() => setVisibleEdit(false)} title="Edit Jabatan">
-            <View style={{ justifyContent: 'space-between', flex: 1 }}>
+            <View style={[Styles.justifySpaceBetween, Styles.flex1]}>
                <View>
                   <InputForm
                      type="default"

app/(application)/profile.tsx

@@ -43,7 +43,7 @@ export default function Profile() {
    };
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                headerTitle: 'Profile',
@@ -75,7 +75,7 @@ export default function Profile() {
             }
             style={[Styles.h100, { backgroundColor: colors.background }]}
          >
-            <View style={{ flexDirection: 'column' }}>
+            <View style={[Styles.flexColumn]}>
                <LinearGradient
                   colors={[colors.header, colors.homeGradient]}
                   style={[Styles.wrapHeadViewMember]}

app/(application)/project/[id]/add-file.tsx

@@ -129,7 +129,7 @@ export default function ProjectAddFile() {
 
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -155,7 +155,7 @@ export default function ProjectAddFile() {
                )
             }}
          />
-         <ScrollView style={{ backgroundColor: colors.background }}>
+         <ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
             <View style={[Styles.p15, Styles.mb100]}>
                <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
                {

app/(application)/project/[id]/add-task.tsx

@@ -135,7 +135,7 @@ export default function ProjectAddTask() {
    }
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -174,7 +174,7 @@ export default function ProjectAddTask() {
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
             keyboardVerticalOffset={headerHeight}
          >
-            <ScrollView style={{ backgroundColor: colors.background }}>
+            <ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
                <View style={[Styles.p15, Styles.mb100]}>
                   <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      <DateTimePicker
@@ -198,20 +198,20 @@ export default function ProjectAddTask() {
                   </View>
                   <View style={[Styles.mv10]}>
                      <View style={[Styles.rowSpaceBetween]}>
-                        <View style={[{ width: "48%" }]}>
+                        <View style={[Styles.w48]}>
                            <Text style={[Styles.mb05]}>
                               Tanggal Mulai <Text style={{ color: colors.error }}>*</Text>
                            </Text>
                            <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
-                              <Text style={{ textAlign: "center" }}>{from}</Text>
+                              <Text style={Styles.textCenter}>{from}</Text>
                            </View>
                         </View>
-                        <View style={[{ width: "48%" }]}>
+                        <View style={[Styles.w48]}>
                            <Text style={[Styles.mb05]}>
                               Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text>
                            </Text>
                            <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
-                              <Text style={{ textAlign: "center" }}>{to}</Text>
+                              <Text style={Styles.textCenter}>{to}</Text>
                            </View>
                         </View>
                      </View>

app/(application)/project/[id]/cancel.tsx

@@ -67,7 +67,7 @@ export default function ProjectCancel() {
    }
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (

app/(application)/project/[id]/edit.tsx

@@ -88,7 +88,7 @@ export default function EditProject() {
 
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -123,7 +123,7 @@ export default function EditProject() {
                )
             }}
          />
-         <ScrollView style={{ backgroundColor: colors.background }}>
+         <ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
             <View style={[Styles.p15, Styles.mb100]}>
                <InputForm
                   label="Judul Kegiatan"

app/(application)/project/[id]/index.tsx

@@ -93,7 +93,7 @@ export default function DetailProject() {
    };
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -113,7 +113,7 @@ export default function DetailProject() {
             }}
          />
          <ScrollView
-            style={{ backgroundColor: colors.background }}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
             refreshControl={
                <RefreshControl
                   refreshing={refreshing}

app/(application)/project/[id]/report.tsx

@@ -88,7 +88,7 @@ export default function ReportProject() {
 
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (

app/(application)/project/create.tsx

@@ -192,7 +192,7 @@ export default function CreateProject() {
 
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (

app/(application)/project/create/member.tsx

@@ -105,7 +105,7 @@ export default function AddMemberCreateProject() {
                )
             }}
          />
-         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+         <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
             <InputSearch onChange={(val) => setSearch(val)} value={search} />
 
             {
@@ -127,11 +127,11 @@ export default function AddMemberCreateProject() {
                   </View>
 
                   :
-                  <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }, Styles.pv05]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }, Styles.pv05]}>Tidak ada member yang dipilih</Text>
             }
             <ScrollView
                showsVerticalScrollIndicator={false}
-               style={{ backgroundColor: colors.background }}
+               style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}
             >
 
                {
@@ -159,7 +159,7 @@ export default function AddMemberCreateProject() {
                      }
                      )
                      :
-                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, Styles.textCenter]}>Tidak ada data</Text>
                }
             </ScrollView>
          </View>

app/(application)/project/create/task.tsx

@@ -121,7 +121,7 @@ export default function CreateProjectAddTask() {
    }
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -160,7 +160,7 @@ export default function CreateProjectAddTask() {
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
             keyboardVerticalOffset={headerHeight}
          >
-            <ScrollView style={{ backgroundColor: colors.background }}>
+            <ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
                <View style={[Styles.p15, Styles.mb100]}>
                   <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      <DateTimePicker
@@ -189,7 +189,7 @@ export default function CreateProjectAddTask() {
                               Tanggal Mulai <Text style={{ color: colors.error }}>*</Text>
                            </Text>
                            <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
-                              <Text style={{ textAlign: "center" }}>{from}</Text>
+                              <Text style={Styles.textCenter}>{from}</Text>
                            </View>
                         </View>
                         <View style={[{ width: "48%" }]}>
@@ -197,7 +197,7 @@ export default function CreateProjectAddTask() {
                               Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text>
                            </Text>
                            <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
-                              <Text style={{ textAlign: "center" }}>{to}</Text>
+                              <Text style={Styles.textCenter}>{to}</Text>
                            </View>
                         </View>
                      </View>

app/(application)/project/index.tsx

@@ -126,7 +126,7 @@ export default function ListProject() {
    })
 
    return (
-      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
          <View>
             <WrapTab>
                <ScrollView horizontal showsHorizontalScrollIndicator={false} style={[Styles.round20]}>
@@ -189,7 +189,7 @@ export default function ListProject() {
                </ScrollView>
             </WrapTab>
 
-            <View style={[Styles.rowSpaceBetween, { alignItems: 'center' }]}>
+            <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter]}>
                <InputSearch width={68} onChange={setSearch} />
                <Pressable
                   onPress={() => {
@@ -203,21 +203,21 @@ export default function ListProject() {
                   />
                </Pressable>
             </View>
-            <View style={[Styles.mv05]}>
+            <View style={[Styles.mt10]}>
                {
                   // entityUser.role != 'cosupadmin' && entityUser.role != 'admin' &&
                   <View style={[Styles.rowOnly]}>
                      <Text style={[Styles.mr05]}>Filter :</Text>
                      {
                         (entityUser.role == "supadmin" || entityUser.role == "developer") &&
-                        <LabelStatus size="small" category="secondary" text={nameGroup} style={{ marginRight: 5 }} />
+                        <LabelStatus size="small" category="secondary" text={nameGroup} style={[Styles.mr05]} />
                      }
                      {
                         (entityUser.role == 'user' || entityUser.role == 'coadmin')
-                           ? (cat == 'null' || cat == 'undefined' || cat == undefined || cat == '' || cat == 'data-saya') ? <LabelStatus size="small" category="secondary" text="Kegiatan Saya" style={{ marginRight: 5 }} /> : <LabelStatus size="small" category="secondary" text="Semua Kegiatan" style={{ marginRight: 5 }} />
+                           ? (cat == 'null' || cat == 'undefined' || cat == undefined || cat == '' || cat == 'data-saya') ? <LabelStatus size="small" category="secondary" text="Kegiatan Saya" style={[Styles.mr05]} /> : <LabelStatus size="small" category="secondary" text="Semua Kegiatan" style={[Styles.mr05]} />
                            : ''
                      }
-                     <LabelStatus size="small" category="secondary" text={isYear} style={{ marginRight: 5 }} />
+                     <LabelStatus size="small" category="secondary" text={isYear} style={[Styles.mr05]} />
                      {/* {
                         (entityUser.role == 'user' || entityUser.role == 'coadmin')
                            ? (cat == 'null' || cat == 'undefined' || cat == undefined || cat == '' || cat == 'data-saya') ? <LabelStatus size="small" category="primary" text="Kegiatan Saya" /> : <LabelStatus size="small" category="primary" text="Semua Kegiatan" />
@@ -227,7 +227,7 @@ export default function ListProject() {
                }
             </View>
          </View>
-         <View style={[{ flex: 2 }]}>
+         <View style={[Styles.flex2, Styles.mt10]}>
             {
                loading ?
                   isList ?
@@ -399,7 +399,7 @@ export default function ListProject() {
                      )
                      :
                      <View style={[Styles.mt15]}>
-                        <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada kegiatan</Text>
+                        <Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada kegiatan</Text>
                      </View>
             }
          </View>

app/(application)/project/update/[detail].tsx

@@ -172,7 +172,7 @@ export default function UpdateProjectTask() {
    }, [range])
 
    return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
          <Stack.Screen
             options={{
                // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -203,7 +203,7 @@ export default function UpdateProjectTask() {
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
             keyboardVerticalOffset={headerHeight}
          >
-            <ScrollView style={{ backgroundColor: colors.background }}>
+            <ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
                <View style={[Styles.p15, Styles.mb100]}>
                   <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      {
@@ -237,13 +237,13 @@ export default function UpdateProjectTask() {
                         <View style={[{ width: '48%' }]}>
                            <Text style={[Styles.mb05]}>Tanggal Mulai <Text style={{ color: colors.error }}>*</Text></Text>
                            <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
-                              <Text style={{ textAlign: 'center' }}>{from}</Text>
+                              <Text style={Styles.textCenter}>{from}</Text>
                            </View>
                         </View>
                         <View style={[{ width: '48%' }]}>
                            <Text style={[Styles.mb05]}>Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text></Text>
                            <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
-                              <Text style={{ textAlign: 'center' }}>{to}</Text>
+                              <Text style={Styles.textCenter}>{to}</Text>
                            </View>
                         </View>
                      </View>

app/(application)/search.tsx

@@ -82,7 +82,7 @@ export default function Search() {
 
    return (
       <>
-         <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+         <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
             <Stack.Screen
                options={{
                   headerTitle: 'Pencarian',

app/(application)/setting/index.tsx

@@ -117,7 +117,7 @@ export default function ListSetting() {
          }}
       >
          <View style={Styles.rowItemsCenter}>
-            <Ionicons name={icon as any} size={20} color={colors.text} style={{ marginRight: 10 }} />
+            <Ionicons name={icon as any} size={20} color={colors.text} style={Styles.mr10} />
             <Text style={{ color: colors.text }}>{label}</Text>
          </View>
          {theme === value && <Ionicons name="checkmark" size={20} color={colors.text} />}
@@ -125,7 +125,7 @@ export default function ListSetting() {
    );
 
    return (
-      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
          <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }, Styles.p0, Styles.round05]}>
             {
                entities.idUserRole != "developer" &&

app/_layout.tsx

@@ -1,5 +1,5 @@
 import AuthProvider from '@/providers/AuthProvider';
-import ThemeProvider from '@/providers/ThemeProvider';
+import ThemeProvider, { useTheme } from '@/providers/ThemeProvider';
 import { useFonts } from 'expo-font';
 import { Stack } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
@@ -8,10 +8,27 @@ import { useEffect } from 'react';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { NotifierWrapper } from 'react-native-notifier';
 import 'react-native-reanimated';
+import Styles from '@/constants/Styles';
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
+// Inner component - berada di dalam ThemeProvider, bisa pakai useTheme()
+function AppStack() {
+  const { colors } = useTheme();
+
+  return (
+    <>
+      <Stack screenOptions={{ contentStyle: { backgroundColor: colors.header } }}>
+        <Stack.Screen name="index" options={{ headerShown: false }} />
+        <Stack.Screen name="verification" options={{ headerShown: false }} />
+        <Stack.Screen name="(application)" options={{ headerShown: false }} />
+      </Stack>
+      <StatusBar style="auto" />
+    </>
+  );
+}
+
 export default function RootLayout() {
   const [loaded] = useFonts({
     SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
@@ -28,16 +45,11 @@ export default function RootLayout() {
   }
 
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
+    <GestureHandlerRootView style={Styles.flex1}>
       <NotifierWrapper>
         <ThemeProvider>
           <AuthProvider>
-            <Stack>
+            <AppStack />
-              <Stack.Screen name="index" options={{ headerShown: false }} />
-              <Stack.Screen name="verification" options={{ headerShown: false }} />
-              <Stack.Screen name="(application)" options={{ headerShown: false }} />
-            </Stack>
-            <StatusBar style="auto" />
           </AuthProvider>
         </ThemeProvider>
       </NotifierWrapper>

app/verification.tsx

@@ -33,7 +33,7 @@ export default function Index() {
    }
    return (
       <View style={[Styles.wrapLogin, { backgroundColor: colors.background }]} >
-         <View style={{ alignItems: "center", marginVertical: 50 }}>
+         <View style={[Styles.rowItemsCenter, Styles.mv50]}>
             <Image
                source={require("../assets/images/logo.png")}
                style={[{ width: 300, height: 150 }]}

components/borderBottomItem.tsx

@@ -1,8 +1,7 @@
-import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { useTheme } from "@/providers/ThemeProvider";
 import React, { useState } from "react";
-import { Dimensions, Pressable, View } from "react-native";
+import { Pressable, View } from "react-native";
 import Text from "./Text";
 
 type Props = {
@@ -69,7 +68,7 @@ export default function BorderBottomItem({ title, subtitle, icon, desc, onPress,
          {
             (leftBottomInfo || rightBottomInfo) &&
             (
-               <View style={[rightBottomInfo && !leftBottomInfo ? Styles.rowSpaceBetweenReverse : Styles.rowSpaceBetween, Styles.mt05]}>
+               <View style={[rightBottomInfo && !leftBottomInfo ? Styles.rowSpaceBetweenReverse : Styles.rowSpaceBetween, Styles.mt02]}>
                   {
                      typeof leftBottomInfo == 'string' ?
                         <Text style={[Styles.textInformation, { color: colors.dimmed }]}>{leftBottomInfo}</Text>

components/borderBottomItem2.tsx

@@ -149,7 +149,7 @@ export default function BorderBottomItem2({ title, subtitle, icon, desc, onPress
             {desc && <Text style={[Styles.textDefault, Styles.mt05, { textAlign: 'left', color: textColorFix }]} numberOfLines={descEllipsize == false ? 0 : 2} ellipsizeMode='tail'>{desc}</Text>}
             {
                dataFile.length > 0 && (
-                  <ScrollView horizontal style={[Styles.mv05]} showsHorizontalScrollIndicator={false}>
+                  <ScrollView horizontal style={[Styles.mv10]} showsHorizontalScrollIndicator={false}>
                      {dataFile.map((item, index) => (
                         <Pressable
                            key={index}
@@ -173,7 +173,7 @@ export default function BorderBottomItem2({ title, subtitle, icon, desc, onPress
             {
                (leftBottomInfo || rightBottomInfo) &&
                (
-                  <View style={[rightBottomInfo && !leftBottomInfo ? Styles.rowSpaceBetweenReverse : Styles.rowSpaceBetween, Styles.mt05]}>
+                  <View style={[rightBottomInfo && !leftBottomInfo ? Styles.rowSpaceBetweenReverse : Styles.rowSpaceBetween, Styles.mt10]}>
                      {
                         typeof leftBottomInfo == 'string' ?
                            <Text style={[Styles.textInformation, { color: colors.dimmed }]}>{leftBottomInfo}</Text>

components/buttonSetting.tsx

@@ -25,7 +25,7 @@ export default function ButtonSetting({ title, onPress, icon, borderBottom = tru
                {icon}
                <Text style={[{ color: colors.text }, Styles.ml05]}>{title}</Text>
             </View>
-            {value && <Text style={[{ color: colors.dimmed }]}>{value}</Text>}
+            {value && <Text style={[{ color: colors.dimmed, alignSelf: 'center' }]}>{value}</Text>}
          </View>
       </Pressable>
    )

components/inputForm.tsx

@@ -69,7 +69,7 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
                      Styles.mh05,
                      multiline && { height: '100%', maxHeight: 100 },
                      { width: width ? lebar * width / 100 : lebar * 0.78, color: colors.text },
-                     Platform.OS == 'ios' ? { paddingVertical: 1, paddingTop: 3 } : { paddingVertical: 0 },
+                     Platform.OS == 'ios' ? { paddingVertical: 1, paddingTop: 4 } : { paddingVertical: 0 },
                   ]}
                />
             </View>

constants/Styles.ts

@@ -118,6 +118,9 @@ const Styles = StyleSheet.create({
    mh15: {
       marginHorizontal: 15
    },
+   mv50: {
+      marginVertical: 50
+   },
    mv10: {
       marginVertical: 10
    },
@@ -169,12 +172,21 @@ const Styles = StyleSheet.create({
    pb10: {
       paddingBottom: 10
    },
+   pb50: {
+      paddingBottom: 50
+   },
+   pb100: {
+      paddingBottom: 100
+   },
    pb13: {
       paddingBottom: 13
    },
    pb15: {
       paddingBottom: 15
    },
+   pb20: {
+      paddingBottom: 20
+   },
    ph05: {
       paddingHorizontal: 5,
    },
@@ -235,6 +247,9 @@ const Styles = StyleSheet.create({
    w100: {
       width: '100%'
    },
+   w48: {
+      width: '48%'
+   },
    w95: {
       width: '95%'
    },
@@ -277,6 +292,9 @@ const Styles = StyleSheet.create({
       justifyContent: 'space-between',
       flexDirection: 'row'
    },
+   justifySpaceBetween: {
+      justifyContent: 'space-between'
+   },
    rowSpaceBetweenReverse: {
       justifyContent: 'space-between',
       flexDirection: 'row-reverse'
@@ -791,6 +809,57 @@ const Styles = StyleSheet.create({
    },
    flex1: {
       flex: 1
+   },
+   flex2: {
+      flex: 2
+   },
+   flexColumn: {
+      flexDirection: 'column'
+   },
+   textCenter: {
+      textAlign: 'center'
+   },
+   posAbsolute: {
+      position: 'absolute'
+   },
+   zIndex1: {
+      zIndex: 1
+   },
+   zIndexMinus1: {
+      zIndex: -1
+   },
+   alignCenter: {
+      alignItems: 'center'
+   },
+   itemsCenter: {
+      alignItems: 'center'
+   },
+   justifyCenter: {
+      justifyContent: 'center'
+   },
+   resizeContain: {
+      resizeMode: 'contain'
+   },
+   resizeCover: {
+      resizeMode: 'cover'
+   },
+   resizeStretch: {
+      resizeMode: 'stretch'
+   },
+   textWhite: {
+      color: 'white'
+   },
+   font16: {
+      fontSize: 16
+   },
+   font26: {
+      fontSize: 26
+   },
+   ph16: {
+      paddingHorizontal: 16
+   },
+   alignStart: {
+      alignItems: 'flex-start'
    }
 })