upd: tab navigation

Deskripsi:
- fix tab navigation :: diganti pake useState
- group
- position
- member
- diskusi umum
- project
- divisi
- tugas divisi

No Issues

app/(application)/_layout.tsx

@@ -1,7 +1,9 @@
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import HeaderDiscussionGeneral from "@/components/discussion_general/headerDiscussionGeneral";
 import HeaderRightDivisionList from "@/components/division/headerDivisionList";
+import HeaderRightGroupList from "@/components/group/headerGroupList";
 import HeaderMemberList from "@/components/member/headerMemberList";
+import HeaderRightPositionList from "@/components/position/headerRightPositionList";
 import HeaderRightProjectList from "@/components/project/headerProjectList";
 import { Headers } from "@/constants/Headers";
 import store from "@/lib/store";
@@ -30,8 +32,6 @@ export default function RootLayout() {
             <Stack.Screen name="search" options={{ title: 'Pencarian' }} />
             <Stack.Screen name="notification" options={{ title: 'Notifikasi' }} />
             <Stack.Screen name="profile" options={{ title: 'Profile' }} />
-            <Stack.Screen name="group" options={{ title: 'Lembaga Desa', headerShown: false }} />
-            <Stack.Screen name="position" options={{ title: 'Jabatan', headerShown: false }} />
             <Stack.Screen name="member/index" options={{
                headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                title: 'Anggota',
@@ -56,7 +56,25 @@ export default function RootLayout() {
                headerTitleAlign: 'center',
                headerRight: () => <HeaderRightDivisionList />
             }} />
+            <Stack.Screen name="coba" options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.push('/home') }} />,
+               title: 'Latihan tab',
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderMemberList />
+            }} />
             <Stack.Screen name="division/[id]/(fitur-division)" options={{ headerShown: false }} />
+            <Stack.Screen name="group/index" options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Lembaga Desa',
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderRightGroupList />
+            }} />
+            <Stack.Screen name="position/index" options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Jabatan',
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderRightPositionList />
+            }} />
          </Stack>
          <StatusBar style="light" />
       </Provider>

app/(application)/discussion/index.tsx

@@ -33,12 +33,13 @@ export default function Discussion() {
    const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
    const [loading, setLoading] = useState(true)
    const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
+   const [status, setStatus] = useState<'true' | 'false'>('true')
 
    async function handleLoad(loading: boolean) {
       try {
          setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiGetDiscussionGeneral({ user: hasil, active: String(active), search: search, group: String(group) })
+         const response = await apiGetDiscussionGeneral({ user: hasil, active: status, search: search, group: String(group) })
          setData(response.data)
          setNameGroup(response.filter.name)
       } catch (error) {
@@ -50,7 +51,7 @@ export default function Discussion() {
 
    useEffect(() => {
       handleLoad(true)
-   }, [active, search, group])
+   }, [status, search, group])
 
    useEffect(() => {
       handleLoad(false)
@@ -62,18 +63,18 @@ export default function Discussion() {
             <View style={[Styles.p15, Styles.mb100]}>
                <View style={[Styles.wrapBtnTab]}>
                   <ButtonTab
-                     active={active == "false" ? "false" : "true"}
+                     active={status == "false" ? "false" : "true"}
                      value="true"
-                     onPress={() => { router.push(`/discussion?active=true&group=${group}&search=${search}`) }}
+                     onPress={() => { setStatus("true") }}
                      label="Aktif"
-                     icon={<Feather name="check-circle" color={active == "false" ? 'black' : 'white'} size={20} />}
+                     icon={<Feather name="check-circle" color={status == "false" ? 'black' : 'white'} size={20} />}
                      n={2} />
                   <ButtonTab
-                     active={active == "false" ? "false" : "true"}
+                     active={status == "false" ? "false" : "true"}
                      value="false"
-                     onPress={() => { router.push(`/discussion?active=false&group=${group}&search=${search}`) }}
+                     onPress={() => { setStatus("false") }}
                      label="Arsip"
-                     icon={<AntDesign name="closecircleo" color={active == "true" ? 'black' : 'white'} size={20} />}
+                     icon={<AntDesign name="closecircleo" color={status == "true" ? 'black' : 'white'} size={20} />}
                      n={2} />
                </View>
                <InputSearch onChange={setSearch} />
@@ -107,7 +108,7 @@ export default function Discussion() {
                                     }
                                     title={item.title}
                                     subtitle={
-                                       active != "false" && <LabelStatus category={item.status === 1 ? "success" : "error"} text={item.status === 1 ? "BUKA" : "TUTUP"} size="small" />
+                                       status != "false" && <LabelStatus category={item.status === 1 ? "success" : "error"} text={item.status === 1 ? "BUKA" : "TUTUP"} size="small" />
                                     }
                                     rightTopInfo={item.createdAt}
                                     desc={item.desc}
@@ -118,7 +119,7 @@ export default function Discussion() {
                                        </View>
                                     }
                                     rightBottomInfo={`${item.total_komentar} Komentar`}
-                                   
+
                                  />
                               )
                            })

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

@@ -38,6 +38,7 @@ export default function ListTask() {
    const update = useSelector((state: any) => state.taskUpdate)
    const [loading, setLoading] = useState(true)
    const arrSkeleton = Array.from({ length: 3 })
+   const [statusFix, setStatusFix] = useState<'0' | '1' | '2' | '3'>('0')
 
    async function handleLoad(loading: boolean) {
       try {
@@ -46,7 +47,7 @@ export default function ListTask() {
          const response = await apiGetTask({
             user: hasil,
             division: id,
-            status,
+            status: statusFix,
             search,
          });
          setData(response.data);
@@ -63,7 +64,7 @@ export default function ListTask() {
 
    useEffect(() => {
       handleLoad(true);
-   }, [status, search]);
+   }, [statusFix, search]);
 
    return (
       <SafeAreaView>
@@ -71,64 +72,56 @@ export default function ListTask() {
             <View style={[Styles.p15, Styles.mb100]}>
                <ScrollView horizontal style={[Styles.mb10]}>
                   <ButtonTab
-                     active={status}
+                     active={statusFix}
                      value="0"
-                     onPress={() => {
+                     onPress={() => { setStatusFix("0") }}
-                        router.replace("./task?status=0");
-                     }}
                      label="Segera"
                      icon={
                         <MaterialCommunityIcons
                            name="clock-alert-outline"
-                           color={status == "0" ? "white" : "black"}
+                           color={statusFix == "0" ? "white" : "black"}
                            size={20}
                         />
                      }
                      n={4}
                   />
                   <ButtonTab
-                     active={status}
+                     active={statusFix}
                      value="1"
-                     onPress={() => {
+                     onPress={() => { setStatusFix("1") }}
-                        router.replace("./task?status=1");
-                     }}
                      label="Dikerjakan"
                      icon={
                         <MaterialCommunityIcons
                            name="progress-check"
-                           color={status == "1" ? "white" : "black"}
+                           color={statusFix == "1" ? "white" : "black"}
                            size={20}
                         />
                      }
                      n={4}
                   />
                   <ButtonTab
-                     active={status}
+                     active={statusFix}
                      value="2"
-                     onPress={() => {
+                     onPress={() => { setStatusFix("2") }}
-                        router.replace("./task?status=2");
-                     }}
                      label="Selesai"
                      icon={
                         <Ionicons
                            name="checkmark-done-circle-outline"
-                           color={status == "2" ? "white" : "black"}
+                           color={statusFix == "2" ? "white" : "black"}
                            size={20}
                         />
                      }
                      n={4}
                   />
                   <ButtonTab
-                     active={status}
+                     active={statusFix}
                      value="3"
-                     onPress={() => {
+                     onPress={() => { setStatusFix("3") }}
-                        router.replace("./task?status=3");
-                     }}
                      label="Batal"
                      icon={
                         <AntDesign
                            name="closecircleo"
-                           color={status == "3" ? "white" : "black"}
+                           color={statusFix == "3" ? "white" : "black"}
                            size={20}
                         />
                      }

app/(application)/division/index.tsx

@@ -42,6 +42,8 @@ export default function ListDivision() {
    const update = useSelector((state: any) => state.divisionUpdate)
    const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
    const [loading, setLoading] = useState(false)
+   const [status, setStatus] = useState<'true' | 'false'>('true')
+   const [category, setCategory] = useState<'divisi-saya' | 'semua'>('divisi-saya')
 
    async function handleLoad(loading: boolean) {
       try {
@@ -49,10 +51,10 @@ export default function ListDivision() {
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetDivision({
             user: hasil,
-            active: String(active),
+            active: status,
             search: search,
             group: String(group),
-            kategori: String(cat),
+            kategori: category,
          });
 
          if (response.success) {
@@ -72,7 +74,7 @@ export default function ListDivision() {
 
    useEffect(() => {
       handleLoad(true);
-   }, [active, search, group, cat]);
+   }, [status, search, group, category]);
 
    return (
       <SafeAreaView>
@@ -82,32 +84,28 @@ export default function ListDivision() {
                   entityUser.role != "user" && entityUser.role != "coadmin" ?
                      <View style={[Styles.wrapBtnTab]}>
                         <ButtonTab
-                           active={active == "false" ? "false" : "true"}
+                           active={status == "false" ? "false" : "true"}
                            value="true"
-                           onPress={() => {
+                           onPress={() => { setStatus("true") }}
-                              router.replace(`/division?active=true&search=${search}&group=${group}&cat=${cat}`);
-                           }}
                            label="Aktif"
                            icon={
                               <Feather
                                  name="check-circle"
-                                 color={active == "false" ? "black" : "white"}
+                                 color={status == "false" ? "black" : "white"}
                                  size={20}
                               />
                            }
                            n={2}
                         />
                         <ButtonTab
-                           active={active == "false" ? "false" : "true"}
+                           active={status == "false" ? "false" : "true"}
                            value="false"
-                           onPress={() => {
+                           onPress={() => { setStatus("false") }}
-                              router.replace(`/division?active=false&search=${search}&group=${group}&cat=${cat}`);
-                           }}
                            label="Tidak Aktif"
                            icon={
                               <AntDesign
                                  name="closecircleo"
-                                 color={active == "true" ? "black" : "white"}
+                                 color={status == "true" ? "black" : "white"}
                                  size={20}
                               />
                            }
@@ -117,32 +115,28 @@ export default function ListDivision() {
                      :
                      <View style={[Styles.wrapBtnTab]}>
                         <ButtonTab
-                           active={cat == "semua" ? "false" : "true"}
+                           active={category == "semua" ? "false" : "true"}
                            value="true"
-                           onPress={() => {
+                           onPress={() => { setCategory("divisi-saya") }}
-                              router.replace(`/division?&search=${search}&group=${group}&cat=divisi-saya`);
-                           }}
                            label="Divisi Saya"
                            icon={
                               <Ionicons
                                  name="file-tray-outline"
-                                 color={cat == "semua" ? "black" : "white"}
+                                 color={category == "semua" ? "black" : "white"}
                                  size={20}
                               />
                            }
                            n={2}
                         />
                         <ButtonTab
-                           active={cat == "semua" ? "false" : "true"}
+                           active={category == "semua" ? "false" : "true"}
                            value="false"
-                           onPress={() => {
+                           onPress={() => { setCategory("semua") }}
-                              router.replace(`/division?&search=${search}&group=${group}&cat=semua`);
-                           }}
                            label="Semua Divisi"
                            icon={
                               <Ionicons
                                  name="file-tray-stacked-outline"
-                                 color={cat == "semua" ? "white" : "black"}
+                                 color={category == "semua" ? "white" : "black"}
                                  size={20}
                               />
                            }

app/(application)/feature.tsx

@@ -26,15 +26,15 @@ export default function Feature() {
                <ButtonFiturMenu icon={<Ionicons name="chatbubbles-sharp" size={35} color="black" />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }} />
             </View>
             <View style={[Styles.rowSpaceBetween, Styles.mb15, (entityUser.role != 'supadmin' && entityUser.role != 'developer' && entityUser.role != 'cosupadmin' && Styles.w40)]}>
-               <ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color="black" />} text="Anggota" onPress={() => { router.push('/member?active=true') }} />
+               <ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color="black" />} text="Anggota" onPress={() => { router.push('/member') }} />
-               <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie" size={35} color="black" />} text="Jabatan" onPress={() => { router.push('/position?active=true') }} />
+               <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie" size={35} color="black" />} text="Jabatan" onPress={() => { router.push('/position') }} />
                {
                   entityUser.role == "cosupadmin" && <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" onPress={() => { router.push('/banner') }} />
                }
                {
                   (entityUser.role == "supadmin" || entityUser.role == "developer") &&
                   <>
-                     <ButtonFiturMenu icon={<AntDesign name="tags" size={35} color="black" />} text="Lembaga Desa" onPress={() => { router.push('/group?active=true') }} />
+                     <ButtonFiturMenu icon={<AntDesign name="tags" size={35} color="black" />} text="Lembaga Desa" onPress={() => { router.push('/group') }} />
                      <ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={35} color="black" />} text="Tema" onPress={() => { }} />
                   </>
                }

app/(application)/group/index.tsx

@@ -13,7 +13,7 @@ import { apiDeleteGroup, apiEditGroup, apiGetGroup } from "@/lib/api";
 import { setUpdateGroup } from "@/lib/groupSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
-import { router, useLocalSearchParams } from "expo-router";
+import { useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
 import { useDispatch, useSelector } from "react-redux";
@@ -33,6 +33,7 @@ export default function Index() {
    const [search, setSearch] = useState('')
    const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
    const [loading, setLoading] = useState(true)
+   const [status, setStatus] = useState<'true' | 'false'>('true')
 
    const [idChoose, setIdChoose] = useState('')
    const [activeChoose, setActiveChoose] = useState(true)
@@ -74,7 +75,7 @@ export default function Index() {
       try {
          setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiGetGroup({ user: hasil, active: String(active), search: search })
+         const response = await apiGetGroup({ user: hasil, active: status, search: search })
          setData(response.data)
       } catch (error) {
          console.error(error)
@@ -90,7 +91,7 @@ export default function Index() {
 
    useEffect(() => {
       handleLoad(true)
-   }, [active, search])
+   }, [status, search])
 
 
 
@@ -101,18 +102,18 @@ export default function Index() {
             <View style={[Styles.p15]}>
                <View style={[Styles.wrapBtnTab]}>
                   <ButtonTab
-                     active={active == "false" ? "false" : "true"}
+                     active={status == "false" ? "false" : "true"}
                      value="true"
-                     onPress={() => { router.replace('/group?active=true') }}
+                     onPress={() => { setStatus("true") }}
                      label="Aktif"
-                     icon={<Feather name="check-circle" color={active == "true" ? 'white' : 'black'} size={20} />}
+                     icon={<Feather name="check-circle" color={status == "true" ? 'white' : 'black'} size={20} />}
                      n={2} />
                   <ButtonTab
-                     active={active == "false" ? "false" : "true"}
+                     active={status == "false" ? "false" : "true"}
                      value="false"
-                     onPress={() => { router.replace('/group?active=false') }}
+                     onPress={() => { setStatus("false") }}
                      label="Tidak Aktif"
-                     icon={<AntDesign name="closecircleo" color={active == "false" ? 'white' : 'black'} size={20} />}
+                     icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : 'black'} size={20} />}
                      n={2} />
                </View>
                <InputSearch onChange={setSearch} />

app/(application)/member/index.tsx

@@ -36,12 +36,13 @@ export default function Index() {
    const update = useSelector((state: any) => state.memberUpdate)
    const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
    const [loading, setLoading] = useState(true)
+   const [status, setStatus] = useState<'true' | 'false'>('true')
 
    async function handleLoad(loading: boolean) {
       try {
          setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiGetUser({ user: hasil, active: String(active), search: search, group: String(group) })
+         const response = await apiGetUser({ user: hasil, active: status, search: search, group: String(group) })
          setData(response.data)
          setNameGroup(response.filter.name)
       } catch (error) {
@@ -53,7 +54,7 @@ export default function Index() {
 
    useEffect(() => {
       handleLoad(true)
-   }, [active, search, group])
+   }, [status, search, group])
 
    useEffect(() => {
       handleLoad(false)
@@ -66,18 +67,18 @@ export default function Index() {
             <View style={[Styles.p15]}>
                <View style={[Styles.wrapBtnTab]}>
                   <ButtonTab
-                     active={active == "false" ? "false" : "true"}
+                     active={status == "false" ? "false" : "true"}
                      value="true"
-                     onPress={() => { router.replace(`/member?active=true&group=${group}&search=${search}`) }}
+                     onPress={() => { setStatus("true") }}
                      label="Aktif"
-                     icon={<Feather name="check-circle" color={active == "false" ? 'black' : 'white'} size={20} />}
+                     icon={<Feather name="check-circle" color={status == "false" ? 'black' : 'white'} size={20} />}
                      n={2} />
                   <ButtonTab
-                     active={active == "false" ? "false" : "true"}
+                     active={status == "false" ? "false" : "true"}
                      value="false"
-                     onPress={() => { router.replace(`/member?active=false&group=${group}&search=${search}`) }}
+                     onPress={() => { setStatus("false") }}
                      label="Tidak Aktif"
-                     icon={<AntDesign name="closecircleo" color={active == "false" ? 'white' : 'black'} size={20} />}
+                     icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : 'black'} size={20} />}
                      n={2} />
                </View>
                <InputSearch onChange={setSearch} />

app/(application)/position/index.tsx

@@ -13,7 +13,7 @@ import { apiDeletePosition, apiEditPosition, apiGetPosition } from "@/lib/api";
 import { setUpdatePosition } from "@/lib/positionSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
-import { router, useLocalSearchParams } from "expo-router";
+import { useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
 import { useDispatch, useSelector } from "react-redux";
@@ -30,6 +30,7 @@ export default function Index() {
    const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
    const [loading, setLoading] = useState(true)
    const { token, decryptToken } = useAuthSession()
+   const [status, setStatus] = useState<'true' | 'false'>('true')
    const entityUser = useSelector((state: any) => state.user)
    const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>()
    const [isModal, setModal] = useState(false)
@@ -49,7 +50,7 @@ export default function Index() {
       try {
          setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiGetPosition({ user: hasil, active: String(active), search: search, group: String(group) })
+         const response = await apiGetPosition({ user: hasil, active: status, search: search, group: String(group) })
          setData(response.data)
          setNameGroup(response.filter.name)
       } catch (error) {
@@ -66,7 +67,7 @@ export default function Index() {
 
    useEffect(() => {
       handleLoad(true)
-   }, [active, search, group])
+   }, [status, search, group])
 
 
    function handleChooseData(id: string, name: string, active: boolean, group: string) {
@@ -124,18 +125,18 @@ export default function Index() {
             <View style={[Styles.p15]}>
                <View style={[Styles.wrapBtnTab]}>
                   <ButtonTab
-                     active={active == "false" ? "false" : "true"}
+                     active={status == "false" ? "false" : "true"}
                      value="true"
-                     onPress={() => { router.replace(`/position?active=true&group=${group}&search=${search}`) }}
+                     onPress={() => { setStatus("true") }}
                      label="Aktif"
-                     icon={<Feather name="check-circle" color={active == "true" ? 'white' : 'black'} size={20} />}
+                     icon={<Feather name="check-circle" color={status == "true" ? 'white' : 'black'} size={20} />}
                      n={2} />
                   <ButtonTab
-                     active={active == "false" ? "false" : "true"}
+                     active={status == "false" ? "false" : "true"}
                      value="false"
-                     onPress={() => { router.replace(`/position?active=false&group=${group}&search=${search}`) }}
+                     onPress={() => { setStatus("false") }}
                      label="Tidak Aktif"
-                     icon={<AntDesign name="closecircleo" color={active == "false" ? 'white' : 'black'} size={20} />}
+                     icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : 'black'} size={20} />}
                      n={2} />
                </View>
                <InputSearch onChange={setSearch} />

app/(application)/project/index.tsx

@@ -36,6 +36,7 @@ export default function ListProject() {
       group?: string;
       cat?: string;
    }>();
+   const [statusFix, setStatusFix] = useState<'0' | '1' | '2' | '3'>('0')
    const { token, decryptToken } = useAuthSession();
    const entityUser = useSelector((state: any) => state.user);
    const [search, setSearch] = useState("");
@@ -52,7 +53,7 @@ export default function ListProject() {
          const hasil = await decryptToken(String(token?.current));
          const response = await apiGetProject({
             user: hasil,
-            status: String(status),
+            status: statusFix,
             search: search,
             group: String(group),
             kategori: String(cat),
@@ -76,7 +77,7 @@ export default function ListProject() {
 
    useEffect(() => {
       handleLoad(true);
-   }, [status, search, group, cat]);
+   }, [statusFix, search, group, cat]);
 
    return (
       <SafeAreaView>
@@ -84,72 +85,56 @@ export default function ListProject() {
             <View style={[Styles.p15, Styles.mb100]}>
                <ScrollView horizontal style={[Styles.mb10]}>
                   <ButtonTab
-                     active={String(status)}
+                     active={statusFix}
                      value="0"
-                     onPress={() => {
+                     onPress={() => { setStatusFix("0") }}
-                        router.replace(
-                           `/project?status=0&group=${group}&search=${search}&cat=${cat}`
-                        );
-                     }}
                      label="Segera"
                      icon={
                         <MaterialCommunityIcons
                            name="clock-alert-outline"
-                           color={status == "0" ? "white" : "black"}
+                           color={statusFix == "0" ? "white" : "black"}
                            size={20}
                         />
                      }
                      n={4}
                   />
                   <ButtonTab
-                     active={String(status)}
+                     active={statusFix}
                      value="1"
-                     onPress={() => {
+                     onPress={() => { setStatusFix("1") }}
-                        router.replace(
-                           `/project?status=1&group=${group}&search=${search}&cat=${cat}`
-                        );
-                     }}
                      label="Dikerjakan"
                      icon={
                         <MaterialCommunityIcons
                            name="progress-check"
-                           color={status == "1" ? "white" : "black"}
+                           color={statusFix == "1" ? "white" : "black"}
                            size={20}
                         />
                      }
                      n={4}
                   />
                   <ButtonTab
-                     active={String(status)}
+                     active={statusFix}
                      value="2"
-                     onPress={() => {
+                     onPress={() => { setStatusFix("2") }}
-                        router.replace(
-                           `/project?status=2&group=${group}&search=${search}&cat=${cat}`
-                        );
-                     }}
                      label="Selesai"
                      icon={
                         <Ionicons
                            name="checkmark-done-circle-outline"
-                           color={status == "2" ? "white" : "black"}
+                           color={statusFix == "2" ? "white" : "black"}
                            size={20}
                         />
                      }
                      n={4}
                   />
                   <ButtonTab
-                     active={String(status)}
+                     active={statusFix}
                      value="3"
-                     onPress={() => {
+                     onPress={() => { setStatusFix("3") }}
-                        router.replace(
-                           `/project?status=3&group=${group}&search=${search}&cat=${cat}`
-                        );
-                     }}
                      label="Batal"
                      icon={
                         <AntDesign
                            name="closecircleo"
-                           color={status == "3" ? "white" : "black"}
+                           color={statusFix == "3" ? "white" : "black"}
                            size={20}
                         />
                      }

components/buttonTab.tsx

@@ -1,6 +1,5 @@
 import { ColorsStatus } from "@/constants/ColorsStatus"
 import Styles from "@/constants/Styles"
-import { AntDesign, Feather } from "@expo/vector-icons"
 import { Text, TouchableOpacity } from "react-native"
 
 type Props = {

components/buttonTabExpo.tsx

@@ -0,0 +1,35 @@
+import { ColorsStatus } from '@/constants/ColorsStatus';
+import Styles from '@/constants/Styles';
+import { AntDesign, Feather, Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import { TabTriggerSlotProps } from 'expo-router/ui';
+import { ComponentProps, Ref } from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+type Feather = ComponentProps<typeof Feather>['name'];
+type Ionicons = ComponentProps<typeof Ionicons>['name'];
+type AntDesign = ComponentProps<typeof AntDesign>['name'];
+type MaterialCommunityIcons = ComponentProps<typeof MaterialCommunityIcons>['name'];
+
+export type TabButtonProps = TabTriggerSlotProps & {
+   iconType: 'Feather' | 'Ionicons' | 'AntDesign' | 'MaterialCommunityIcons';
+   iconF?: Feather
+   iconI?: Ionicons
+   iconA?: AntDesign
+   iconM?: MaterialCommunityIcons
+   ref: Ref<View>;
+   n: number
+};
+
+export function ButtonTabExpo({ iconType, iconF, iconI, iconA, iconM, children, isFocused, n, ...props }: TabButtonProps) {
+   return (
+      <Pressable
+         {...props}
+         style={[Styles.btnTab, (isFocused) && ColorsStatus.orange, { width: n == 2 ? '50%' : 'auto' }]}>
+         {iconType == 'Feather' && <Feather name={iconF} color={isFocused == false ? 'black' : 'white'} size={20} />}
+         {iconType == 'Ionicons' && <Ionicons name={iconI} color={isFocused == false ? 'black' : 'white'} size={20} />}
+         {iconType == 'AntDesign' && <AntDesign name={iconA} color={isFocused == false ? 'black' : 'white'} size={20} />}
+         {iconType == 'MaterialCommunityIcons' && <MaterialCommunityIcons name={iconM} color={isFocused == false ? 'black' : 'white'} size={20} />}
+         <Text style={[Styles.textMediumSemiBold, Styles.ml10, { color: isFocused ? 'white' : 'black' }]}>{children}</Text>
+      </Pressable>
+   );
+}

components/group/headerGroupList.tsx

@@ -1,21 +1,18 @@
-import ButtonBackHeader from "@/components/buttonBackHeader";
+import Styles from "@/constants/Styles"
-import { ButtonForm } from "@/components/buttonForm";
+import { apiCreateGroup } from "@/lib/api"
-import ButtonMenuHeader from "@/components/buttonMenuHeader";
+import { setUpdateGroup } from "@/lib/groupSlice"
-import DrawerBottom from "@/components/drawerBottom";
+import { useAuthSession } from "@/providers/AuthProvider"
-import { InputForm } from "@/components/inputForm";
+import { AntDesign } from "@expo/vector-icons"
-import MenuItemRow from "@/components/menuItemRow";
+import { useState } from "react"
-import { Headers } from "@/constants/Headers";
+import { ToastAndroid, View } from "react-native"
-import Styles from "@/constants/Styles";
+import { useDispatch, useSelector } from "react-redux"
-import { apiCreateGroup } from "@/lib/api";
+import { ButtonForm } from "../buttonForm"
-import { setUpdateGroup } from "@/lib/groupSlice";
+import ButtonMenuHeader from "../buttonMenuHeader"
-import { useAuthSession } from "@/providers/AuthProvider";
+import DrawerBottom from "../drawerBottom"
-import AntDesign from "@expo/vector-icons/AntDesign";
+import { InputForm } from "../inputForm"
-import { router, Stack } from "expo-router";
+import MenuItemRow from "../menuItemRow"
-import React, { useState } from "react";
-import { ToastAndroid, View } from "react-native";
-import { useDispatch, useSelector } from "react-redux";
 
-export default function RootLayout() {
+export default function HeaderRightGroupList() {
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.groupUpdate)
    const { token, decryptToken } = useAuthSession()
@@ -57,17 +54,10 @@ export default function RootLayout() {
       }
    }
 
+
    return (
       <>
-         <Stack screenOptions={Headers.shadow}>
+         <ButtonMenuHeader onPress={() => { setVisible(true) }} />
-            <Stack.Screen name="index" options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Lembaga Desa',
-               headerTitleAlign: 'center',
-               headerRight: () => <ButtonMenuHeader onPress={() => { setVisible(true) }} />
-            }} />
-         </Stack>
-
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow

components/modalFilter.tsx

@@ -83,11 +83,11 @@ export default function ModalFilter({ open, close, page, category }: Props) {
                   page == 'project' ?
                      category == "filter-data"
                         ?
-                        router.push(`/${page}?status=0&cat=${chooseGroup}`)
+                        router.replace(`/${page}?status=0&cat=${chooseGroup}`)
                         :
-                        router.push(`/${page}?status=0&group=${chooseGroup}`)
+                        router.replace(`/${page}?status=0&group=${chooseGroup}`)
                      :
-                     router.push(`/${page}?active=true&group=${chooseGroup}`)
+                     router.replace(`/${page}?active=true&group=${chooseGroup}`)
                }} />
             </View>
          </View>

components/position/headerRightPositionList.tsx

@@ -1,24 +1,21 @@
-import ButtonBackHeader from "@/components/buttonBackHeader"
-import { ButtonForm } from "@/components/buttonForm"
-import ButtonMenuHeader from "@/components/buttonMenuHeader"
-import DrawerBottom from "@/components/drawerBottom"
-import { InputForm } from "@/components/inputForm"
-import MenuItemRow from "@/components/menuItemRow"
-import ModalFilter from "@/components/modalFilter"
-import ModalSelect from "@/components/modalSelect"
-import SelectForm from "@/components/selectForm"
-import { Headers } from "@/constants/Headers"
 import Styles from "@/constants/Styles"
 import { apiCreatePosition } from "@/lib/api"
 import { setUpdatePosition } from "@/lib/positionSlice"
 import { useAuthSession } from "@/providers/AuthProvider"
 import { AntDesign } from "@expo/vector-icons"
-import { router, Stack } from "expo-router"
 import { useState } from "react"
 import { ToastAndroid, View } from "react-native"
 import { useDispatch, useSelector } from "react-redux"
+import { ButtonForm } from "../buttonForm"
+import ButtonMenuHeader from "../buttonMenuHeader"
+import DrawerBottom from "../drawerBottom"
+import { InputForm } from "../inputForm"
+import MenuItemRow from "../menuItemRow"
+import ModalFilter from "../modalFilter"
+import ModalSelect from "../modalSelect"
+import SelectForm from "../selectForm"
 
-export default function RootLayout() {
+export default function HeaderRightPositionList() {
    const dispatch = useDispatch()
    const update = useSelector((state: any) => state.positionUpdate)
    const { token, decryptToken } = useAuthSession()
@@ -93,17 +90,10 @@ export default function RootLayout() {
 
    }
 
+
    return (
       <>
-         <Stack screenOptions={Headers.shadow}>
+         {entityUser.role != 'user' ? <ButtonMenuHeader onPress={() => { setVisible(true) }} /> : <></>}
-            <Stack.Screen name="index" options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Jabatan',
-               headerTitleAlign: 'center',
-               headerRight: () => entityUser.role != 'user' ? <ButtonMenuHeader onPress={() => { setVisible(true) }} /> : <></>
-            }} />
-         </Stack>
-
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow