update setting screen

.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+};

.gitignore

@@ -0,0 +1,72 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+**/.xcode.env.local
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+
+# node.js
+#
+node_modules
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+**/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+};

.watchmanconfig

@@ -0,0 +1 @@
+{}

App.tsx

@@ -7,11 +7,8 @@ import {NavigationContainer} from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import Geolocation from '@react-native-community/geolocation';
 import Modal2 from "react-native-modal";
-
-
 const Stack = createNativeStackNavigator();
 
-
 // All Component //
 import {AuthProvider, useAuth} from './src/component/authContext'; 
 import MapCollectScreen from './src/component/mapCollectScreen';
@@ -34,6 +31,9 @@ import SurveyPJU from './src/component/surveyPJU';
 import SurveyPDAM from './src/component/surveyPDAM';
 import SurveyPermit from './src/component/surveyPERMIT';
 import DraftListScreen from './src/component/draftscreen';
+import DraftPJU from './src/component/draftPJU';
+import DraftPDAM from './src/component/draftPDAM';
+import DraftPermit from './src/component/draftPermit';
 import ProfileScreen  from './src/component/profilescreen';
 import MapCollectLineScreen from './src/component/mapCollectLineScreen';
 import CollectLineScreen from './src/component/collectLinescreen';
@@ -43,22 +43,20 @@ import CollectPolygonScreen from './src/component/collectPolygonscreen';
 import EditPolygonScreen from './src/component/editPolygonscreen';
 import MapViewPolygonScreen from './src/component/mapViewPolygonScreen';
 import MapViewLineScreen from './src/component/mapViewLineScreen';
+import SettingScreen from './src/component/settingScreen';
+import MyAccount from './src/component/myAccount';
+import ChangePass from './src/component/changePassword';
 import { USER_API_URL } from "../SurveyApp/urlConfig";
 import { PermissionsAndroid } from 'react-native';
 
 
-
-
-
-
 function App(navigation:any) {
   return (
     <AuthProvider>
       <Nav/>
     </AuthProvider>
   );
-}
+};
-
 export const Nav = () => {
   const { authState, onLogout} = useAuth();
   const [email,setEmail] = useState("");
@@ -66,7 +64,6 @@ export const Nav = () => {
   const [password, setPassword] = useState("");
   const [confirmpassword, setConfirmPassword] = useState("");
   const [modalVisibleProfil, setmodalVisibleProfil] = useState(false);
-
   const [validPass,setValidPass] = useState(false);
   const [emailExist,setEmailExist] = useState(false);
   const [currentPosition, setCurrentPosition] = useState<[number,number] | null>(null);
@@ -74,7 +71,6 @@ export const Nav = () => {
 
   let width = Dimensions.get('window').width;
   let height = Dimensions.get('window').height;
-
   const [widthModal, setWidthModal] = useState(
     width < height ? '80%' : '50%',
   );
@@ -155,8 +151,7 @@ export const Nav = () => {
     else{
       setEmailExist(true);
     }
-  }
+  };
-
   const requestCameraPermission = async () => {
     try {
       const granted = await PermissionsAndroid.request(
@@ -175,8 +170,7 @@ export const Nav = () => {
     } catch (error) {
       
     }
-  }
+  };
-
   useEffect(() => {
     requestCameraPermission()
     Dimensions.addEventListener('change', ({window:{width,height}})=>{
@@ -194,12 +188,10 @@ export const Nav = () => {
       }
     })
   }, []);
-
   const logout = () => {
     onLogout();
     setmodalVisibleProfil(false);
-  }
+  };
-
   const profileLayout = () => {
     return(<>
       <TouchableOpacity onPress={()=>setmodalVisibleProfil(true)}>
@@ -274,8 +266,7 @@ export const Nav = () => {
     </>
 
     )
-  }
+  };
-
   const geonetLogo = () => {
     return(<>
       <View>
@@ -288,7 +279,7 @@ export const Nav = () => {
     </>
 
     )
-  }
+  };
   const geonetLogo2 = () => {
     return(<>
       <View>
@@ -301,8 +292,7 @@ export const Nav = () => {
     </>
 
     )
-  }
+  };
-    
   return (
     <NavigationContainer>
         <Stack.Navigator>
@@ -312,7 +302,7 @@ export const Nav = () => {
                 headerStyle: {
                   backgroundColor: '#34A6F8',
                 },
-                headerRight: geonetLogo2,
+                headerRight: geonetLogo,
                 headerTintColor: '#FFFFFF',
                 headerShadowVisible: false,
               }}
@@ -526,6 +516,72 @@ export const Nav = () => {
               fontSize:20
             }
           }}/>
+          <Stack.Screen name="Draft Penerangan Jalan Umum" component={DraftPJU}
+          options={{
+            headerStyle: {
+              backgroundColor: '#34A6F8',
+            },
+            headerTintColor: '#FFFFFF',
+            headerShadowVisible: false,
+            headerTitleStyle: {
+              fontSize:20
+            }
+          }}/>
+          <Stack.Screen name="Draft Pipa PDAM" component={DraftPDAM}
+          options={{
+            headerStyle: {
+              backgroundColor: '#34A6F8',
+            },
+            headerTintColor: '#FFFFFF',
+            headerShadowVisible: false,
+            headerTitleStyle: {
+              fontSize:20
+            }
+          }}/>
+          <Stack.Screen name="Draft Land Permit" component={DraftPermit}
+          options={{
+            headerStyle: {
+              backgroundColor: '#34A6F8',
+            },
+            headerTintColor: '#FFFFFF',
+            headerShadowVisible: false,
+            headerTitleStyle: {
+              fontSize:20
+            }
+          }}/>
+          <Stack.Screen name="Setting" component={SettingScreen}
+          options={{
+            headerStyle: {
+              backgroundColor: '#34A6F8',
+            },
+            headerTintColor: '#FFFFFF',
+            headerShadowVisible: false,
+            headerTitleStyle: {
+              fontSize:20
+            }
+          }}/>
+          <Stack.Screen name="My Account" component={MyAccount}
+          options={{
+            headerStyle: {
+              backgroundColor: '#34A6F8',
+            },
+            headerTintColor: '#FFFFFF',
+            headerShadowVisible: false,
+            headerTitleStyle: {
+              fontSize:20
+            }
+          }}/>
+          <Stack.Screen name="Change Password" component={ChangePass}
+          options={{
+            headerStyle: {
+              backgroundColor: '#34A6F8',
+            },
+            headerTintColor: '#FFFFFF',
+            headerShadowVisible: false,
+            headerTitleStyle: {
+              fontSize:20
+            }
+          }}/>
           <Stack.Screen name="Profile" component={ProfileScreen}
           options={{
             headerStyle: {

package.json

@@ -15,7 +15,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
-    "@maplibre/maplibre-react-native": "^10.0.0-alpha.24",
+    "@maplibre/maplibre-react-native": "^10.0.1",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/geolocation": "^3.4.0",
     "@react-native-community/netinfo": "^11.4.1",
@@ -33,6 +33,7 @@
     "react-native-dropdown-select-list": "^2.0.5",
     "react-native-fs": "^2.20.0",
     "react-native-image-picker": "^7.1.2",
+    "react-native-linear-gradient": "^2.8.3",
     "react-native-maps": "^1.18.2",
     "react-native-modal": "^13.0.1",
     "react-native-paper": "^5.12.5",
@@ -62,5 +63,6 @@
   },
   "engines": {
     "node": ">=18"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/component/authContext.tsx

@@ -40,7 +40,6 @@ export const AuthProvider = ({children}:any) =>{
         email:null,
         id:null
     });
-
     useEffect(() => {
         const loadToken = async () => {
             const token = await AsyncStorage.getItem(TOKEN_KEY);
@@ -58,8 +57,7 @@ export const AuthProvider = ({children}:any) =>{
             }
         };
         loadToken();
-    })
+    });
-
     const login = async (email:string, password: string) => {
         try {
             const url = `${USER_API_URL}/login`
@@ -107,7 +105,6 @@ export const AuthProvider = ({children}:any) =>{
         }
         
     };
-
     const logout = async () => {
         await AsyncStorage.removeItem(TOKEN_KEY);
         await AsyncStorage.removeItem("USER_DATA");
@@ -119,7 +116,6 @@ export const AuthProvider = ({children}:any) =>{
             id:null
         });
     };
-
     const value = {
         onLogin: login,
         onLogout: logout,

src/component/changePassword.tsx

@@ -0,0 +1,141 @@
+import React from "react";
+import {
+    TextInput,
+    StatusBar,
+    StyleSheet,
+    Text,
+    View,
+    Image,
+    ScrollView,
+    RefreshControl,
+    Pressable,
+    TouchableOpacity,
+  } from 'react-native';
+import { useEffect, useState } from 'react';
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {useIsFocused} from '@react-navigation/native';
+import AwesomeAlert from "react-native-awesome-alerts";
+import LinearGradient from 'react-native-linear-gradient';
+import { Button } from "react-native-paper";
+
+export default function ChangePass() {
+    const [showCurrPass,setShowCurrPass] = useState(true);
+    const [showNewPass,setShowNewPass] = useState(true);
+    const [showRepeatPass,setShowRepeatPass] = useState(true);
+    return(
+        <View style={{flex:1}}>
+            <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
+            <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'100%'}} />
+            <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,marginTop:10}}>
+                <View key={"detail section"} style={{paddingLeft: 20,paddingRight:20,marginTop:'10%',height:'80%'}}>
+                    
+                    
+                    
+                    <View key={"currentPass"} style={{marginBottom:20}}>
+                        <Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>Current Password :</Text>
+                        
+                        <View style={{flexDirection:'row',width:'100%'}}>
+                            <TextInput inlineImageLeft="lock" inlineImagePadding={20} 
+                                style={{
+                                    color:'black',
+                                    height : 50,
+                                    paddingHorizontal : 20,
+                                    borderWidth: 4,
+                                    borderColor: "#d7d7d7",
+                                    borderRadius: 7,
+                                    width:'100%'
+                                }}
+                                placeholderTextColor={'grey'} 
+                                placeholder='Password' 
+                                secureTextEntry={showCurrPass}
+                                autoCorrect={false} 
+                                autoCapitalize='none'
+                            />
+                            <Pressable style={{position:'absolute',alignSelf:'center',left:'90%'}} onTouchStart={()=>setShowCurrPass(false)} onTouchEnd={()=>setShowCurrPass(true)}>
+                                <Image
+                                    source={require('../../assets/icon/view.png')}
+                                    style={{tintColor:'#C4C4C4'}}
+                                />
+                            </Pressable>
+                        </View>
+                    </View>
+                    <View key={"newPass"} style={{marginBottom:20}}>
+                        <Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>New Password :</Text>
+                        
+                        <View style={{flexDirection:'row',width:'100%'}}>
+                            <TextInput inlineImageLeft="lock" inlineImagePadding={20} 
+                                style={{
+                                    color:'black',
+                                    height : 50,
+                                    paddingHorizontal : 20,
+                                    borderWidth: 4,
+                                    borderColor: "#d7d7d7",
+                                    borderRadius: 7,
+                                    width:'100%'
+                                }}
+                                placeholderTextColor={'grey'} 
+                                placeholder='Password' 
+                                secureTextEntry={showNewPass}
+                                autoCorrect={false} 
+                                autoCapitalize='none'
+                            />
+                            <Pressable style={{position:'absolute',alignSelf:'center',left:'90%'}} onTouchStart={()=>setShowNewPass(false)} onTouchEnd={()=>setShowNewPass(true)}>
+                                <Image
+                                    source={require('../../assets/icon/view.png')}
+                                    style={{tintColor:'#C4C4C4'}}
+                                />
+                            </Pressable>
+                        </View>
+                    </View>
+                    <View key={"repeatPass"} style={{marginBottom:20}}>
+                        <Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>Repeat Password :</Text>
+                        
+                        <View style={{flexDirection:'row',width:'100%'}}>
+                            <TextInput inlineImageLeft="lock" inlineImagePadding={20} 
+                                style={{
+                                    color:'black',
+                                    height : 50,
+                                    paddingHorizontal : 20,
+                                    borderWidth: 4,
+                                    borderColor: "#d7d7d7",
+                                    borderRadius: 7,
+                                    width:'100%'
+                                }}
+                                placeholderTextColor={'grey'} 
+                                placeholder='Password' 
+                                secureTextEntry={showRepeatPass}
+                                autoCorrect={false} 
+                                autoCapitalize='none'
+                            />
+                            <Pressable style={{position:'absolute',alignSelf:'center',left:'90%'}} onTouchStart={()=>setShowRepeatPass(false)} onTouchEnd={()=>setShowRepeatPass(true)}>
+                                <Image
+                                    source={require('../../assets/icon/view.png')}
+                                    style={{tintColor:'#C4C4C4'}}
+                                />
+                            </Pressable>
+                        </View>
+                    </View>
+                    
+
+
+                    <View key={"Button"}>
+                        <TouchableOpacity>
+                            <View style={{
+                                paddingHorizontal : 20,
+                                backgroundColor:'#0386D0',
+                                // borderWidth : 1.5,
+                                borderRadius: 7,
+                                height : 50,
+                                alignItems:'center',
+                                justifyContent:'center'
+                            }}>
+                                <Text style={{color:'#F5F5F5',fontSize:16,fontWeight:600}}>Save</Text>
+                            </View>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            </View>
+        </View>
+    )
+}

src/component/collectLinescreen.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import {View,Text, StyleSheet, ScrollView, TouchableOpacity, Image, Animated, TextInput, Button, Alert} from 'react-native';
 
 import MapLibreGL from '@maplibre/maplibre-react-native';
+import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
 import { SelectList } from 'react-native-dropdown-select-list';
 import { RadioButton } from 'react-native-paper';
 import DatePicker from 'react-native-date-picker';
@@ -245,7 +246,7 @@ export default function CollectLineScreen({route,navigation}:collectLineScreenPr
       };
       storeData()
       setAlertOffline(false);
-      navigation.navigate('Property Survey', { screen: 'Property Survey'})
+      navigation.navigate('Survey Pipa PDAM', { screen: 'Survey Pipa PDAM'})
     };
     const insertAttachment = async (json: any,files: any) => {
       try {
@@ -259,7 +260,7 @@ export default function CollectLineScreen({route,navigation}:collectLineScreenPr
             JSON.stringify({pdam_id:json[0].id, file:file.file, mimetype:file.file_type, size:file.fileSize})
           ).then(async (resp) => {
               Alert.alert("Success")
-              navigation.navigate('Property Survey', { screen: 'Property Survey'})
+              navigation.navigate('Survey Pipa PDAM', { screen: 'Survey Pipa PDAM'})
               setAlertOnline(false);
             }
           )
@@ -319,20 +320,19 @@ export default function CollectLineScreen({route,navigation}:collectLineScreenPr
                     }}
                 />
                 <View style={{flexDirection:'column'}}>
-                    <MapLibreGL.MapView
+                    <MapView
                         style={{width:'80%',height:160,alignSelf:'center'}}
-                        styleURL={styleURL}
+                        mapStyle={styleURL}
                         zoomEnabled={false}
                         scrollEnabled={false}
                     >
-                        <MapLibreGL.Camera 
+                        <Camera 
                             centerCoordinate={centerCoords}
-                            allowUpdates={true}
                             zoomLevel={15}
                             minZoomLevel={5}
                             maxZoomLevel={20}
                         />
-                        <MapLibreGL.ShapeSource
+                        <ShapeSource
                             id="line"
                             shape={{
                                 "type": "FeatureCollection",
@@ -348,14 +348,14 @@ export default function CollectLineScreen({route,navigation}:collectLineScreenPr
                                 ]
                             }}
                         >
-                            <MapLibreGL.LineLayer 
+                            <LineLayer 
                                 id="linelayer1"
                                 style={{lineColor:'red',lineWidth:3}}
                             />
-                        </MapLibreGL.ShapeSource>
+                        </ShapeSource>
                       {
                           route.params.coordinates.map((item:any,index:number)=>(
-                              <MapLibreGL.PointAnnotation
+                              <PointAnnotation
                                   children={<></>}
                                   key={index}
                                   id={String(index)}
@@ -364,7 +364,7 @@ export default function CollectLineScreen({route,navigation}:collectLineScreenPr
                               />
                           ))
                       }
-                    </MapLibreGL.MapView>
+                    </MapView>
                     <TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>navigation.navigate('PDAM Map Collect', { screen: 'PDAM Map Collect'})}>
                         <View style={{backgroundColor:'#217dd3',flexDirection:'row',width:150,height:30,borderRadius:20,justifyContent:'center'}}>
                             <Text style={{alignSelf:'center',fontWeight:'bold',fontSize:16,color:'white'}}>View</Text>

src/component/collectPolygonscreen.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import {View,Text, StyleSheet, ScrollView, TouchableOpacity, Image, Animated, TextInput, Button, Alert} from 'react-native';
 
 import MapLibreGL from '@maplibre/maplibre-react-native';
+import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
 import { SelectList } from 'react-native-dropdown-select-list';
 import { RadioButton } from 'react-native-paper';
 import DatePicker from 'react-native-date-picker';
@@ -234,7 +235,7 @@ export default function CollectPolygonScreen({route,navigation}:collectPolygonSc
       };
       storeData()
       setAlertOffline(false);
-      navigation.navigate('Property Survey', { screen: 'Property Survey'})
+      navigation.navigate('Survey Land Permit', { screen: 'Survey Land Permit'})
     };
     const insertAttachment = async (json: any,files: any) => {
       try {
@@ -248,7 +249,7 @@ export default function CollectPolygonScreen({route,navigation}:collectPolygonSc
             JSON.stringify({permit_id:json[0].id, file:file.file, mimetype:file.file_type, size:file.fileSize})
           ).then(async (resp) => {
               Alert.alert("Success")
-              navigation.navigate('Property Survey', { screen: 'Property Survey'})
+              navigation.navigate('Survey Land Permit', { screen: 'Survey Land Permit'})
               setAlertOnline(false);
             }
           )
@@ -338,20 +339,19 @@ export default function CollectPolygonScreen({route,navigation}:collectPolygonSc
                     }}
                 />
                 <View style={{flexDirection:'column'}}>
-                    <MapLibreGL.MapView
+                    <MapView
                         style={{width:'80%',height:160,alignSelf:'center'}}
-                        styleURL={styleURL}
+                        mapStyle={styleURL}
                         zoomEnabled={false}
                         scrollEnabled={false}
                     >
-                        <MapLibreGL.Camera 
+                        <Camera 
                             centerCoordinate={centerCoords}
-                            allowUpdates={true}
                             zoomLevel={16}
                             minZoomLevel={5}
                             maxZoomLevel={20}
                         />
-                        <MapLibreGL.ShapeSource
+                        <ShapeSource
                           id="polygon"
                           shape={{
                               "type": "FeatureCollection",
@@ -369,21 +369,21 @@ export default function CollectPolygonScreen({route,navigation}:collectPolygonSc
                               ]
                           }}
                         >
-                          <MapLibreGL.LineLayer 
+                          <LineLayer 
                             id="linelayer1"
                             style={{lineColor:'red',lineWidth:3}}
                           />
-                          <MapLibreGL.FillLayer 
+                          <FillLayer 
                             id="some-fill-feature"
                             style={{
                                 fillColor: ['interpolate', ['linear'], ['zoom'], 0, '#eeddbb', 2, '#0daa00', 3, '#bbbbee'],
                                 fillOpacity:0.5
                             }}
                           />
-                        </MapLibreGL.ShapeSource>
+                        </ShapeSource>
                       {
                           route.params.coordinates.map((item:any,index:number)=>(
-                              <MapLibreGL.PointAnnotation
+                              <PointAnnotation
                                   key={index}
                                   id={String(index)}
                                   coordinate={item}
@@ -392,10 +392,10 @@ export default function CollectPolygonScreen({route,navigation}:collectPolygonSc
                                 <View style={{ height: 75, width: 75 }}>
                                   <View style={{width:15,height:15,backgroundColor:'red',borderColor:'black',borderRadius:50}} />
                                 </View>
-                              </MapLibreGL.PointAnnotation>
+                              </PointAnnotation>
                           ))
                       }
-                    </MapLibreGL.MapView>
+                    </MapView>
                     <TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>navigation.navigate('Permit Map', { screen: 'Permit Map'})}>
                         <View style={{backgroundColor:'#217dd3',flexDirection:'row',width:150,height:30,borderRadius:20,justifyContent:'center'}}>
                             <Text style={{alignSelf:'center',fontWeight:'bold',fontSize:16,color:'white'}}>View</Text>

src/component/collectscreen.tsx

@@ -26,6 +26,7 @@ import NetInfo from "@react-native-community/netinfo";
 import RNFS from 'react-native-fs';
 
 import MapLibreGL from '@maplibre/maplibre-react-native';
+import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
 import Moment from 'moment';
 import { RadioButton } from 'react-native-paper';
 import AwesomeAlert from 'react-native-awesome-alerts';
@@ -231,7 +232,7 @@ function CollectScreen({route,navigation}: collectScreenProps) {
       };
       storeData()
       setAlertOffline(false);
-      navigation.navigate('Property Survey', { screen: 'Property Survey'})
+      navigation.navigate('Survey Penerangan Jalan Umum', { screen: 'Survey Penerangan Jalan Umum'})
   }
   const getMyObject = async () => {
     try {
@@ -279,7 +280,6 @@ function CollectScreen({route,navigation}: collectScreenProps) {
         ).then(async (resp) => {
             Alert.alert("Success")
             setAlertOnline(false);
-            // navigation.navigate('Property Survey', { screen: 'Property Survey'})
             navigation.navigate('Survey Penerangan Jalan Umum', { screen: 'Survey Penerangan Jalan Umum'})
           }
         )
@@ -419,28 +419,28 @@ function CollectScreen({route,navigation}: collectScreenProps) {
           }}
         />
         <View style={{flexDirection:'column'}}>
-          <MapLibreGL.MapView
+          <MapView
                 style={{width:'80%',height:160,alignSelf:'center'}}
-                styleURL={styleURL}
+                mapStyle={styleURL}
                 rotateEnabled={false}
                 zoomEnabled={false}
                 pitchEnabled={false}
                 attributionPosition={{bottom: 8, right: 8}}
                 scrollEnabled={false}
               >
-                <MapLibreGL.PointAnnotation 
+                <PointAnnotation 
+                  children={<></>}
                   id={"pjuCoordinate"}
                   coordinate={[fixCoordinate.long, fixCoordinate.lat]}
                 />
-                <MapLibreGL.Camera
+                <Camera
                   centerCoordinate={[fixCoordinate.long, fixCoordinate.lat]!}   
                   pitch={50}
-                  allowUpdates={true}
                   zoomLevel={15}
                   minZoomLevel={5}
                   maxZoomLevel={20}
                 />
-          </MapLibreGL.MapView>
+          </MapView>
           <TouchableOpacity style={{alignSelf:'center',paddingTop:10}} onPress={()=>navigation.navigate('PJU Map Collect', { screen: 'PJU Map Collect'})}>
             <View style={{backgroundColor:'#217dd3',flexDirection:'row',width:150,height:30,borderRadius:20,justifyContent:'center'}}>
                 <Text style={{alignSelf:'center',fontWeight:'bold',fontSize:16,color:'white'}}>Change Location</Text>

src/component/draftPDAM.tsx

@@ -0,0 +1,511 @@
+import { Alert, Animated, Keyboard, RefreshControl } from 'react-native';
+import {
+  TextInput,
+  Button,
+  PermissionsAndroid,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  ScrollView,
+  FlatList,
+  Dimensions
+} from 'react-native';
+
+import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useCallback, useEffect, useState } from 'react';
+import { width } from '@fortawesome/free-solid-svg-icons/faMugSaucer';
+import { SelectList } from 'react-native-dropdown-select-list';
+import { PDAM_API_URL, PERMIT_API_URL, PJU_API_URL } from '../../urlConfig';
+import AwesomeAlert from 'react-native-awesome-alerts';
+import NetInfo from "@react-native-community/netinfo";
+import Moment from 'moment';
+import RNFetchBlob from 'rn-fetch-blob';
+import { MenuProvider } from 'react-native-popup-menu';
+import {
+    Menu,
+    MenuOptions,
+    MenuOption,
+    MenuTrigger,
+  } from 'react-native-popup-menu';
+import React from 'react';
+type sendListDataProps = {route: any,navigation: any};
+function DraftPDAM({route,navigation}: sendListDataProps) {
+    const [selectedSurveyType, setselectedSurveyType] = useState("");
+    const [refreshing, setRefreshing] = useState(false);
+    const onRefresh = useCallback(() => {
+        setLocalStorage([])
+        getDataPDAM()
+        setRefreshing(true);
+        setTimeout(() => {
+          setRefreshing(false);
+        }, 2000);
+    }, []);
+    const [localStorage, setLocalStorage] = useState([]);
+    const [filterData, setFilterData] = useState([]);
+    const [surveyType, setSurveyType] = useState("");
+    const [alertOffline, setAlertOffline] = useState(false);
+    const [connected, setConnected] = useState(true)
+    const storeData = async (value:any) => {
+        // console.log("key",value.case_name)
+        
+        try {
+            const jsonValue = JSON.stringify(value);
+          await AsyncStorage.setItem(String(value.case_id)+" / "+String(value.case_name)+" / "+String(value.case_category)+" / "+"3PA-01"+" / "+String(value.case_risk),jsonValue);
+        } catch (e) {
+          // saving error
+        }
+    };
+    const multiSet = async () => {
+        const firstPair = [1, "value_1"]
+        const secondPair = [2, "value_2"]
+        try {
+            const objCase1 = JSON.stringify({id:1,case_name:"test1"})
+            const objCase2 = JSON.stringify({id:2,case_name:"test2"})
+            await AsyncStorage.multiSet([["case_1",objCase1],["case_2",objCase2]])
+        }   catch(e) {
+          //save error
+        }
+      
+        // console.log("Done.")
+    };
+    const deleteById = (name:string) => {
+        setLocalStorage(oldValues => {
+            return oldValues.filter((local_data:any) => local_data.pipe_name !== name)
+        })
+    };
+    const removeValue = async (key:string) => {
+        try {
+            // console.log("keyDelete",key);
+          await AsyncStorage.removeItem(key)
+        //   await getCount();
+        } catch(e) {
+        }
+    };
+    const selectSurveyType = () => {
+        // console.log(selectedSurveyType);
+        if(selectedSurveyType==='PJU'){
+            getDataPJU()
+        }
+        if(selectedSurveyType==='PDAM'){
+            getDataPDAM()
+        }
+        if(selectedSurveyType==='PERMIT'){
+            getDataPermit()
+        }
+    };
+    const getDataPJU = async () => {
+        setLocalStorage([])
+        try {
+            const jsonValue = await AsyncStorage.getAllKeys()
+            // console.log("All Key",jsonValue)
+                if(jsonValue.length != 0) {
+                    jsonValue.map((item) => {
+                        if(item != "USER_DATA" && item != "my-jwt"){
+                            let splited = item.split(" / ");
+                            const objectItem = {
+                                pju_name:splited[0],
+                                pju_type:splited[1],
+                                installation_date:splited[2],
+                                status:splited[3],
+                                keterangan:splited[4],
+                                long:splited[5],
+                                lat:splited[6]
+                            }
+                            // console.log(objectItem);
+                            
+                            if(splited[7] === 'draftPJU'){
+                                setLocalStorage(oldArray => [...oldArray,objectItem])
+                            }
+                        }
+                    })
+                }
+        } catch (e) {
+          // error reading value
+        }
+    };
+    const getDataPDAM = async () => {
+        setLocalStorage([])
+        try {
+            const jsonValue = await AsyncStorage.getAllKeys()
+            // console.log("All Key",jsonValue.length)
+            if(jsonValue.length != 0) {
+                jsonValue.map((item) => {
+                    if(item != "USER_DATA" && item != "my-jwt"){
+                        let splited = item.split(" / ");
+                        if(splited.length === 7){
+                            const objectItem = {
+                                pipe_name:splited[0],
+                                pipe_type:splited[1],
+                                installation_date:splited[2],
+                                status:splited[3],
+                                keterangan:splited[4],
+                                geom:splited[5].split(",")
+                            }
+                            // console.log(objectItem);
+                            
+                            if(splited[6] === 'draftPDAM'){
+                                setLocalStorage(oldArray => [...oldArray,objectItem])
+                            }
+                        }
+                        
+                    }
+                })
+            }
+        } catch (error) {
+            
+        }
+    };
+    const getDataPermit = async () => {
+        setLocalStorage([])
+        try {
+            const jsonValue = await AsyncStorage.getAllKeys()
+            console.log("All Key",jsonValue)
+            if(jsonValue.length != 0) {
+                jsonValue.map((item) => {
+                    if(item != "USER_DATA" && item != "my-jwt"){
+                        let splited = item.split(" / ");
+                        console.log(splited.length);
+                        
+                        if(splited.length === 5){
+                            const objectItem = {
+                                company_name:splited[0],
+                                permit_status:splited[1],
+                                location:splited[2],
+                                geom:splited[3].split(",")
+                            }
+                            // console.log(objectItem);
+                            
+                            if(splited[4] === 'draftPermit'){
+                                setLocalStorage(oldArray => [...oldArray,objectItem])
+                            }
+                        }
+                        
+                    }
+                })
+            }
+        } catch (error) {
+            
+        }
+    };
+    const isFocused = useIsFocused();
+    useEffect(() => {
+        if(isFocused){
+            getDataPDAM();
+            const unsubscribe = NetInfo.addEventListener((state) => {
+                setConnected(state.isConnected!)
+              });
+              return () => {
+                unsubscribe();
+            };
+        };
+    },[isFocused])
+    const [draftData, setDraftData] = useState(0);
+    navigation.addListener('beforeRemove', (e:any)=> {
+    });
+    const [stringFilter,setStingFilter] = useState('')
+    const handleSearch = (text:string) => {
+        // console.log(text);
+        
+        const formattedQuery = text.toLowerCase();
+        const filteredData = localStorage.filter(data =>
+            data.case_name.toLowerCase().includes(formattedQuery)
+        )
+        setFilterData(filteredData)
+
+    };
+    const reSend = async (data:any) => {
+        if(connected){
+            if(selectedSurveyType==="PJU"){
+                try {
+                    const result = {
+                        status: 0,
+                        body: {},
+                    }
+                    await RNFetchBlob.config({
+                        trusty : true
+                    }).fetch('POST', `${PJU_API_URL}/addData`,{
+                        "Accept": 'application/json',
+                        "Content-Type": "application/json",
+                        },
+                        JSON.stringify({
+                            nama: data.nama,
+                            jenis: data.jenis,
+                            tanggal_installasi: data.date,
+                            status: data.status,
+                            keterangan: data.keterangan,
+                            geom: `POINT(${data.long} ${data.lat})`
+                        })
+                    ).then(async (resp) => {
+                        const status = resp.respInfo.status
+                        if (status == 201) {
+                            deleteById(data.nama);
+                            removeValue(data.nama+" / "+data.jenis+" / "+data.date+" / "+data.status+" / "+data.keterangan+" / "+data.long+" / "+data.lat+" / draftPJU");
+                        }
+                        else {
+                            Alert.alert("Internal Server Error")
+                        }
+                    })
+                } catch (error) {
+                    Alert.alert("Internal Server Error")
+                }
+            }
+            if(selectedSurveyType==="PDAM"){
+                try {
+                    const obj = {
+                        nama: data.nama,
+                        jenis: data.jenis,
+                        tanggal_installasi: data.date,
+                        status: data.status,
+                        keterangan: data.keterangan,
+                        geom: `MULTILINESTRING((${data.geom}))`
+                    };
+                    await RNFetchBlob.config({
+                        trusty : true
+                    }).fetch('POST', `${PDAM_API_URL}/addData`,{
+                        "Content-Type": "application/json",
+                        },
+                        JSON.stringify(obj)
+                    ).then(async(resp) => {
+                        const json = resp.json();
+                        const status = resp.respInfo.status
+                        if (status == 201) {
+                            deleteById(data.nama);
+                            removeValue(data.nama+" / "+data.jenis+" / "+data.date+" / "+data.status+" / "+data.keterangan+" / "+data.geom+" / draftPDAM");
+                        }
+                        else {
+                            Alert.alert("Internal Server Error")
+                        }
+                    })
+                } catch (error) {
+                    Alert.alert("Internal Server Error");
+                }
+                
+            }
+            if(selectedSurveyType==="PERMIT"){
+                try {
+                    const obj = {
+                        company_name: data.company_name,
+                        location: data.location,
+                        permit_status: data.permit_status,
+                        geom: `MULTIPOLYGON (((${data.geom},${String(data.geom).split(",")[0]})))`
+                    }
+                    await RNFetchBlob.config({
+                        trusty : true
+                    }).fetch('POST', `${PERMIT_API_URL}/addData`,{
+                        "Content-Type": "application/json",
+                        },
+                        JSON.stringify(obj)
+                    ).then(async(resp) => {
+                        const json = await resp.json();
+                        const status = resp.respInfo.status;
+                        if (status == 201) {
+                            deleteById(data.company_name);
+                            removeValue(data.company_name+" / "+data.permit_status+" / "+data.location+" / "+data.geom+" / draftPermit");
+                        }
+                        else {
+                            Alert.alert("Internal Server Error")
+                        }
+                    }) 
+                } catch (error) {
+                    Alert.alert("Internal Server Error")
+                }
+                
+            }
+        }
+        else{
+            setAlertOffline(true)
+        }
+    };
+    const optionsStyles = {
+        optionsContainer: {
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            width:100,
+            marginVertical:-10,
+            marginLeft:-10,
+            backgroundColor: '#FFFFFF',
+            borderRadius: 5,
+            shadowColor: '#00000040',
+            shadowOffset: {
+                width: 0,
+                height: 2,
+            },
+            borderColor:'#6B5E5E4D',
+            borderWidth:1,
+            shadowOpacity: 0.2,
+            shadowRadius: 6,
+            elevation: 5,
+        },
+        optionText: {
+          color: 'brown',
+        },
+    };
+    return(
+        <View style={styles.mainContainer}>
+            <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
+            <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'93%'}} />
+            <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,marginTop:10}}>
+                <View key={"Filter"} style={{paddingLeft:30,paddingTop:30,paddingRight:30,marginTop:10}}>
+                    <TextInput
+                        style={{
+                            height: 40,
+                            padding: 10,
+                            borderRadius: 50,
+                            color: 'black',
+                            backgroundColor:'#e6e3e3'
+                        }}
+                        inlineImageLeft="search"
+                        inlineImagePadding={20}
+                        placeholderTextColor={'#6B5E5E'}
+                        placeholder='Search'
+                        onChangeText={queryText => {handleSearch(queryText),setStingFilter(queryText)}}
+                        defaultValue={stringFilter}
+                    />
+                </View>
+                <ScrollView style={{padding: 30}}
+                    refreshControl={
+                        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+                    }>
+                    { 
+                        localStorage.length != 0 ? 
+                        localStorage.map((item:any,index:number) => (
+                        <View key={index}>
+                            <View style={{flexDirection:'row'}}>
+                                <View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}>
+                                    <Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Nama Pipa</Text>
+                                    <Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Jenis</Text>
+                                    <Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Tanggal Installasi</Text>
+                                    <Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Status</Text>
+                                </View>
+                                <View style={{ flexDirection:'column',paddingLeft:0,width:'65%'}}>
+                                    <Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.pipe_name}</Text>
+                                    <Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.pipe_type}</Text>
+                                    <Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.installation_date}</Text>
+                                    <Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.status}</Text>
+                                </View>
+                                <View style={{ marginLeft:'55%',marginTop:0,width:150,height:100,position:'absolute'}}>
+                                    <MenuProvider skipInstanceCheck={true} style={{flexDirection:'column'}}>
+                                        <Menu>
+                                            <MenuTrigger>
+                                                <Image
+                                                    style={{justifyContent:'center',alignSelf:'flex-end'}}
+                                                    source={require('../../assets/icon/Actions.png')}
+                                                    resizeMode='cover'
+                                                />
+                                            </MenuTrigger>
+                                            <MenuOptions customStyles={optionsStyles}>
+                                                <MenuOption
+                                                    onSelect={()=>{
+                                                        navigation.navigate('Edit',{ screen: 'Edit',data: {
+                                                            id:item.id,
+                                                            nama:item.pju_name,
+                                                            jenis:item.pju_type,
+                                                            tanggal_installasi:item.installation_date,
+                                                            status:item.status,
+                                                            keterangan:item.keterangan,
+                                                            long:item.long,
+                                                            lat:item.lat
+                                                        }});
+                                                    }}
+                                                    children={
+                                                        <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
+                                                            <Image source={require('../../assets/icon/edit.png')} />
+                                                            <Text style={{marginLeft:10,color:'#6B5E5EB2',fontSize:14,fontWeight:400}}>Edit</Text>
+                                                        </View>} 
+                                                />
+                                                <View style={{marginVertical: 5, width:85,
+                                                marginHorizontal: 2,
+                                                borderBottomWidth: 1,
+                                                borderColor: '#ccc'}}
+                                                />
+                                                <MenuOption
+                                                    onSelect={()=> {
+                                                        deleteById(item.pipe_name);
+                                                        removeValue(item.pipe_name+" / "+item.pipe_type+" / "+item.installation_date+" / "+item.status+" / "+item.keterangan+" / "+item.geom+" / draftPDAM");
+                                                    }}
+                                                    children={
+                                                        <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
+                                                            <Image source={require('../../assets/icon/dell.png')} />
+                                                            <Text style={{marginLeft:10,color:'#6B5E5EB2',fontSize:14,fontWeight:400}}>Delete</Text>
+                                                        </View>
+                                                    }
+                                                />
+                                            </MenuOptions>
+                                        </Menu>
+                                    </MenuProvider>
+                                </View>
+                            </View>
+                            <View
+                                style={{
+                                    marginTop: 10,
+                                    marginBottom: 10,
+                                    borderBottomColor: '#E2E2E2',
+                                    borderBottomWidth: 2,
+                                }}
+                            />
+                        </View> 
+                        ))
+                        :
+                        <View style={{alignItems:'center',padding:20}}>
+                            <Text style={{fontSize:16,color:'grey'}}>Data Kosong</Text>
+                        </View>
+                    }
+                </ScrollView>
+            </View>
+            <AwesomeAlert
+                show={alertOffline}
+                showProgress={false}
+                title="You are offline"
+                message="You need connection for Resend Data."
+                closeOnTouchOutside={false}
+                closeOnHardwareBackPress={false}
+                showConfirmButton={true}
+                confirmText="Ok"
+                confirmButtonColor="#DD6B55"
+                onConfirmPressed={() => {
+                    setAlertOffline(false);
+                }}
+                overlayStyle={{width:'100%'}}
+                contentContainerStyle={{width:'70%',borderRadius:10}}
+                titleStyle={{fontSize:20}}
+                messageStyle={{fontSize:16}}
+            />
+            {/* <Button onPress={getDataAll} title='GetDataByKey'/> */}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#ecf0f1',
+        padding: 10,
+      },
+    mainContainer: {
+        flex: 1,
+    },
+    title: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'center',
+        fontWeight: 'bold',
+        fontSize: 22,
+        color: 'black',
+        marginBottom: 10
+    },
+    input: {
+        height: 40,
+        borderWidth: 1,
+        padding: 10,
+        borderRadius: 50,
+        color: 'black'
+    },
+});
+
+export default DraftPDAM;

src/component/draftPJU.tsx

@@ -35,7 +35,7 @@ import {
   } from 'react-native-popup-menu';
 import React from 'react';
 type sendListDataProps = {route: any,navigation: any};
-function DraftListScreen({route,navigation}: sendListDataProps) {
+function DraftPJU({route,navigation}: sendListDataProps) {
     const survey_Type = [
         {key:'PJU', value:'PJU'},
         {key:'PERMIT', value:'PERMIT'},
@@ -76,24 +76,12 @@ function DraftListScreen({route,navigation}: sendListDataProps) {
         }
       
         // console.log("Done.")
-    }
+    };
     const deleteById = (name:string) => {
-        if(selectedSurveyType==="PJU"){
+        setLocalStorage(oldValues => {
-            setLocalStorage(oldValues => {
+            return oldValues.filter((local_data:any) => local_data.pju_name !== name)
-                return oldValues.filter((local_data:any) => local_data.pju_name !== name)
+        })
-            })
+    };
-        }
-        if(selectedSurveyType==="PDAM"){
-            setLocalStorage(oldValues => {
-                return oldValues.filter((local_data:any) => local_data.pipe_name !== name)
-            })
-        }
-        if(selectedSurveyType==="PERMIT"){
-            setLocalStorage(oldValues => {
-                return oldValues.filter((local_data:any) => local_data.company_name !== name)
-            })
-        }
-    }
     const removeValue = async (key:string) => {
         try {
             // console.log("keyDelete",key);
@@ -101,7 +89,7 @@ function DraftListScreen({route,navigation}: sendListDataProps) {
         //   await getCount();
         } catch(e) {
         }
-    }
+    };
     const selectSurveyType = () => {
         // console.log(selectedSurveyType);
         if(selectedSurveyType==='PJU'){
@@ -113,7 +101,7 @@ function DraftListScreen({route,navigation}: sendListDataProps) {
         if(selectedSurveyType==='PERMIT'){
             getDataPermit()
         }
-    }
+    };
     const getDataPJU = async () => {
         setLocalStorage([])
         try {
@@ -175,7 +163,7 @@ function DraftListScreen({route,navigation}: sendListDataProps) {
         } catch (error) {
             
         }
-    }
+    };
     const getDataPermit = async () => {
         setLocalStorage([])
         try {
@@ -207,10 +195,11 @@ function DraftListScreen({route,navigation}: sendListDataProps) {
         } catch (error) {
             
         }
-    }
+    };
     const isFocused = useIsFocused();
     useEffect(() => {
         if(isFocused){
+            getDataPJU();
             const unsubscribe = NetInfo.addEventListener((state) => {
                 setConnected(state.isConnected!)
               });
@@ -221,26 +210,7 @@ function DraftListScreen({route,navigation}: sendListDataProps) {
     },[isFocused])
     const [draftData, setDraftData] = useState(0);
     navigation.addListener('beforeRemove', (e:any)=> {
-        // Alert.alert(String(draftData))
+    });
-        
-        // route.params.onGoBack(draftData);
-    })
-    const getCount = async () => {
-        try {
-          const jsonValue = await AsyncStorage.getAllKeys()
-          let index = 0;
-          jsonValue.map((item) => {
-            if(item != "USER_DATA" && item != "my-jwt"){
-                let splited = item.split(" / ");
-                if(splited[4] === 'draftPJU'){
-                    index+=1
-                }
-            }
-            setDraftData(index)
-        })
-        } catch (e) {
-        }
-    };
     const [stringFilter,setStingFilter] = useState('')
     const handleSearch = (text:string) => {
         // console.log(text);
@@ -252,30 +222,6 @@ function DraftListScreen({route,navigation}: sendListDataProps) {
         setFilterData(filteredData)
 
     };
-    const getDataAll = async () => {
-        try {
-          const jsonValue = await AsyncStorage.getAllKeys()
-        // console.log("All",jsonValue)
-        //   return jsonValue != null ? JSON.parse(jsonValue) : null;
-        } catch (e) {
-          // error reading value
-        }
-    };
-    const getDataItem = async () => {
-        try {
-          const jsonValue = await AsyncStorage.getItem("120 / test1 / Structure Damage Missing / SDM-1 / 1. High")
-        //   console.log("pure",jsonValue)
-          return jsonValue != null ? JSON.parse(jsonValue) : null;
-        } catch (e) {
-          // error reading value
-        }
-    };
-    const getMultiple = async () => {
-        try {
-        await AsyncStorage.removeItem("141 / Case 1 / Structure Damage Missing / SDM-01 / 2. Medium / draft")
-        } catch(e) {
-        }
-    }
     const reSend = async (data:any) => {
         if(connected){
             if(selectedSurveyType==="PJU"){
@@ -378,227 +324,143 @@ function DraftListScreen({route,navigation}: sendListDataProps) {
         else{
             setAlertOffline(true)
         }
-    }
+    };
+    const optionsStyles = {
+        optionsContainer: {
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            width:100,
+            marginVertical:-10,
+            marginLeft:-10,
+            backgroundColor: '#FFFFFF',
+            borderRadius: 5,
+            shadowColor: '#00000040',
+            shadowOffset: {
+                width: 0,
+                height: 2,
+            },
+            borderColor:'#6B5E5E4D',
+            borderWidth:1,
+            shadowOpacity: 0.2,
+            shadowRadius: 6,
+            elevation: 5,
+        },
+        optionText: {
+          color: 'brown',
+        },
+    };
     return(
         <View style={styles.mainContainer}>
-            {/* <RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> */}
+            <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
-            {/* <TextInput
+            <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'93%'}} />
-                style={styles.input}
+            <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,marginTop:10}}>
-                placeholder='Search'
+                <View key={"Filter"} style={{paddingLeft:30,paddingTop:30,paddingRight:30,marginTop:10}}>
-                onChangeText={queryText => {handleSearch(queryText),setStingFilter(queryText)}}
+                    <TextInput
-            /> */}
+                        style={{
-            <SelectList
+                            height: 40,
-                search={false}
+                            padding: 10,
-                placeholder="Select Survey Type"
+                            borderRadius: 50,
-                boxStyles={{borderRadius:50,borderWidth:2,borderColor:'black'}}
+                            color: 'black',
-                inputStyles={{color:'black'}}
+                            backgroundColor:'#e6e3e3'
-                dropdownTextStyles={{color:'black'}}
+                        }}
-                data={survey_Type}
+                        inlineImageLeft="search"
-                setSelected={setselectedSurveyType}
+                        inlineImagePadding={20}
-                onSelect={selectSurveyType}
+                        placeholderTextColor={'#6B5E5E'}
-            />
+                        placeholder='Search'
-            <ScrollView style={styles.container}
+                        onChangeText={queryText => {handleSearch(queryText),setStingFilter(queryText)}}
-            refreshControl={
+                        defaultValue={stringFilter}
-                <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+                    />
-            }>
+                </View>
-                {selectedSurveyType=="PJU" && localStorage.length != 0? 
+                <ScrollView style={{padding: 30}}
-                localStorage.map((item:any,index:number) => (
+                    refreshControl={
-                    <View key={index}>
+                        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-                        <View style={{flexDirection:'row'}}>
+                    }>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}>
+                    { 
-                                <Text style={{fontSize:16,color:'black'}}>Nama JPU</Text>
+                        localStorage.length != 0 ? 
-                                <Text style={{fontSize:16,color:'black'}}>Jenis</Text>
+                        localStorage.map((item:any,index:number) => (
-                                <Text style={{fontSize:16,color:'black'}}>Tanggal Installasi</Text>
+                        <View key={index}>
-                                <Text style={{fontSize:16,color:'black'}}>Status</Text>
+                            <View style={{flexDirection:'row'}}>
-                            </View>
+                                <View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'45%'}}>
+                                    <Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Nama JPU</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pju_name}</Text>
+                                    <Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Jenis</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pju_type}</Text>
+                                    <Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Tanggal Installasi</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.installation_date}</Text>
+                                    <Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Status</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.status}</Text>
-                            </View>
-                            <View style={{flexDirection:'column',width:'20%'}}>
-                                <View style={{}}>
-                                    <View>
-                                        <TouchableOpacity onPress={()=> {
-                                            deleteById(item.pju_name);
-                                            removeValue(item.pju_name+" / "+item.pju_type+" / "+item.installation_date+" / "+item.status+" / "+item.keterangan+" / "+item.long+" / "+item.lat+" / draftPJU");
-                                        }}>
-                                            <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
-                                                <Image
-                                                    source={require('../../assets/icon/delete.png')}
-                                                    style={{width:25,height:25}}
-                                                />
-                                                {/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */}
-                                            </View>
-                                        </TouchableOpacity>
-                                    </View>
                                 </View>
-                                <View style={{}}>
+                                <View style={{ flexDirection:'column',paddingLeft:0,width:'65%'}}>
-                                    <View>
+                                    <Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.pju_name}</Text>
-                                        <TouchableOpacity onPress={()=> {reSend({
+                                    <Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.pju_type}</Text>
-                                                nama:item.pju_name,
+                                    <Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.installation_date}</Text>
-                                                jenis:item.pju_type,
+                                    <Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.status}</Text>
-                                                date:Moment(new Date(item.installation_date)).format('YYYY-MM-DD'),
-                                                status:item.status,
-                                                keterangan:item.keterangan,
-                                                long:item.long,
-                                                lat:item.lat
-                                            })}}>
-                                            <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
-                                                <Image
-                                                    source={require('../../assets/icon/send.png')}
-                                                    style={{width:25,height:25}}
-                                                />
-                                                {/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */}
-                                            </View>
-                                        </TouchableOpacity>
-                                    </View>
                                 </View>
-                            </View>
+                                <View style={{ marginLeft:'55%',marginTop:0,width:150,height:100,position:'absolute'}}>
-                        </View>
+                                    <MenuProvider skipInstanceCheck={true} style={{flexDirection:'column'}}>
-                        <View
+                                        <Menu>
-                            style={{
+                                            <MenuTrigger>
-                                marginTop: 10,
-                                marginBottom: 10,
-                                borderBottomColor: 'black',
-                                borderBottomWidth: 1,
-                            }}
-                        />
-                    </View> 
-                ))
-                :
-                selectedSurveyType=="PDAM" && localStorage.length != 0 ? 
-                localStorage.map((item:any,index:number) => (
-                    <View key={index}>
-                        <View style={{flexDirection:'row'}}>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}>
-                                <Text style={{fontSize:16,color:'black'}}>Nama Pipa</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Jenis</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Tanggal Installasi</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Status</Text>
-                            </View>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'45%'}}>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pipe_name}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pipe_type}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.installation_date}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.status}</Text>
-                            </View>
-                            <View style={{flexDirection:'column',width:'20%'}}>
-                                <View style={{}}>
-                                    <View>
-                                        <TouchableOpacity onPress={()=> {
-                                            deleteById(item.pipe_name);
-                                            removeValue(item.pipe_name+" / "+item.pipe_type+" / "+item.installation_date+" / "+item.status+" / "+item.keterangan+" / "+item.geom+" / draftPDAM");
-                                        }}>
-                                            <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
                                                 <Image
-                                                    source={require('../../assets/icon/delete.png')}
+                                                    style={{justifyContent:'center',alignSelf:'flex-end'}}
-                                                    style={{width:25,height:25}}
+                                                    source={require('../../assets/icon/Actions.png')}
+                                                    resizeMode='cover'
                                                 />
-                                            </View>
+                                            </MenuTrigger>
-                                        </TouchableOpacity>
+                                            <MenuOptions customStyles={optionsStyles}>
-                                    </View>
+                                                <MenuOption
-                                </View>
+                                                    onSelect={()=>{
-                                <View style={{}}>
+                                                        navigation.navigate('Edit',{ screen: 'Edit',data: {
-                                        <View>
+                                                            id:item.id,
-                                            <TouchableOpacity onPress={()=> {reSend({
+                                                            nama:item.pju_name,
-                                                    nama:item.pipe_name,
+                                                            jenis:item.pju_type,
-                                                    jenis:item.pipe_type,
+                                                            tanggal_installasi:item.installation_date,
-                                                    date:Moment(new Date(item.installation_date)).format('YYYY-MM-DD'),
+                                                            status:item.status,
-                                                    status:item.status,
+                                                            keterangan:item.keterangan,
-                                                    keterangan:item.keterangan,
+                                                            long:item.long,
-                                                    geom:item.geom
+                                                            lat:item.lat
-                                                })}}>
+                                                        }});
-                                                <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
+                                                    }}
-                                                    <Image
+                                                    children={
-                                                        source={require('../../assets/icon/send.png')}
+                                                        <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
-                                                        style={{width:25,height:25}}
+                                                            <Image source={require('../../assets/icon/edit.png')} />
-                                                    />
+                                                            <Text style={{marginLeft:10,color:'#6B5E5EB2',fontSize:14,fontWeight:400}}>Edit</Text>
-                                                    {/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */}
+                                                        </View>} 
-                                                </View>
-                                            </TouchableOpacity>
-                                        </View>
-                                </View>
-                            </View>
-                        </View>
-                        <View
-                            style={{
-                                marginTop: 10,
-                                marginBottom: 10,
-                                borderBottomColor: 'black',
-                                borderBottomWidth: 1,
-                            }}
-                        />
-                    </View> 
-                ))
-                :
-                selectedSurveyType=="PERMIT" && localStorage.length != 0 ?
-                localStorage.map((item:any,index:number) => (
-                    <View key={index}>
-                        <View style={{flexDirection:'row'}}>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}>
-                                <Text style={{fontSize:16,color:'black'}}>Company Name</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Permit Status</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Location</Text>
-                            </View>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'45%'}}>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.company_name}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.permit_status}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.location}</Text>
-                            </View>
-                            <View style={{flexDirection:'column',width:'20%'}}>
-                                <View style={{}}>
-                                    <View>
-                                        <TouchableOpacity onPress={()=> {
-                                            deleteById(item.company_name);
-                                            removeValue(item.company_name+" / "+item.permit_status+" / "+item.location+" / "+item.geom+" / draftPermit");
-                                        }}>
-                                            <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
-                                                <Image
-                                                    source={require('../../assets/icon/delete.png')}
-                                                    style={{width:25,height:25}}
                                                 />
-                                            </View>
+                                                <View style={{marginVertical: 5, width:85,
-                                        </TouchableOpacity>
+                                                marginHorizontal: 2,
-                                    </View>
+                                                borderBottomWidth: 1,
-                                </View>
+                                                borderColor: '#ccc'}}
-                                <View style={{}}>
+                                                />
-                                        <View>
+                                                <MenuOption
-                                            <TouchableOpacity onPress={()=> {reSend({
+                                                    onSelect={()=> {
-                                                    company_name:item.company_name,
+                                                        deleteById(item.pju_name);
-                                                    permit_status:item.permit_status,
+                                                        removeValue(item.pju_name+" / "+item.pju_type+" / "+item.installation_date+" / "+item.status+" / "+item.keterangan+" / "+item.long+" / "+item.lat+" / draftPJU");
-                                                    location:item.location,
+                                                    }}
-                                                    geom:item.geom
+                                                    children={
-                                                })}}>
+                                                        <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
-                                                <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
+                                                            <Image source={require('../../assets/icon/dell.png')} />
-                                                    <Image
+                                                            <Text style={{marginLeft:10,color:'#6B5E5EB2',fontSize:14,fontWeight:400}}>Delete</Text>
-                                                        source={require('../../assets/icon/send.png')}
+                                                        </View>
-                                                        style={{width:25,height:25}}
+                                                    }
-                                                    />
+                                                />
-                                                    {/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */}
+                                            </MenuOptions>
-                                                </View>
+                                        </Menu>
-                                            </TouchableOpacity>
+                                    </MenuProvider>
-                                        </View>
                                 </View>
                             </View>
+                            <View
+                                style={{
+                                    marginTop: 10,
+                                    marginBottom: 10,
+                                    borderBottomColor: '#E2E2E2',
+                                    borderBottomWidth: 2,
+                                }}
+                            />
                         </View> 
-                        <View
+                        ))
-                            style={{
+                        :
-                                marginTop: 10,
+                        <View style={{alignItems:'center',padding:20}}>
-                                marginBottom: 10,
+                            <Text style={{fontSize:16,color:'grey'}}>Data Kosong</Text>
-                                borderBottomColor: 'black',
+                        </View>
-                                borderBottomWidth: 1,
+                    }
-                            }}
+                </ScrollView>
-                        />
+            </View>
-                    </View> 
-                ))
-                :
-                <View style={{alignItems:'center',padding:20}}>
-                    <Text style={{fontSize:16,color:'grey'}}>Data Kosong</Text>
-                </View>
-                }
-            </ScrollView>
             <AwesomeAlert
                 show={alertOffline}
                 showProgress={false}
@@ -630,7 +492,6 @@ const styles = StyleSheet.create({
       },
     mainContainer: {
         flex: 1,
-        padding: 10,
     },
     title: {
         alignItems: 'center',
@@ -650,4 +511,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default DraftListScreen;
+export default DraftPJU;

src/component/draftPermit.tsx

@@ -0,0 +1,515 @@
+import { Alert, Animated, Keyboard, RefreshControl } from 'react-native';
+import {
+  TextInput,
+  Button,
+  PermissionsAndroid,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  ScrollView,
+  FlatList,
+  Dimensions
+} from 'react-native';
+
+import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useCallback, useEffect, useState } from 'react';
+import { width } from '@fortawesome/free-solid-svg-icons/faMugSaucer';
+import { SelectList } from 'react-native-dropdown-select-list';
+import { PDAM_API_URL, PERMIT_API_URL, PJU_API_URL } from '../../urlConfig';
+import AwesomeAlert from 'react-native-awesome-alerts';
+import NetInfo from "@react-native-community/netinfo";
+import Moment from 'moment';
+import RNFetchBlob from 'rn-fetch-blob';
+import { MenuProvider } from 'react-native-popup-menu';
+import {
+    Menu,
+    MenuOptions,
+    MenuOption,
+    MenuTrigger,
+  } from 'react-native-popup-menu';
+import React from 'react';
+type sendListDataProps = {route: any,navigation: any};
+function DraftPermit({route,navigation}: sendListDataProps) {
+    const survey_Type = [
+        {key:'PJU', value:'PJU'},
+        {key:'PERMIT', value:'PERMIT'},
+        {key:'PDAM', value:'PDAM'},
+    ]
+    const [selectedSurveyType, setselectedSurveyType] = useState("");
+    const [refreshing, setRefreshing] = useState(false);
+    const onRefresh = useCallback(() => {
+        setLocalStorage([]);
+        getDataPermit();
+        setRefreshing(true);
+        setTimeout(() => {
+          setRefreshing(false);
+        }, 2000);
+    }, []);
+    const [localStorage, setLocalStorage] = useState([]);
+    const [filterData, setFilterData] = useState([]);
+    const [surveyType, setSurveyType] = useState("");
+    const [alertOffline, setAlertOffline] = useState(false);
+    const [connected, setConnected] = useState(true)
+    const storeData = async (value:any) => {
+        // console.log("key",value.case_name)
+        
+        try {
+            const jsonValue = JSON.stringify(value);
+          await AsyncStorage.setItem(String(value.case_id)+" / "+String(value.case_name)+" / "+String(value.case_category)+" / "+"3PA-01"+" / "+String(value.case_risk),jsonValue);
+        } catch (e) {
+          // saving error
+        }
+    };
+    const multiSet = async () => {
+        const firstPair = [1, "value_1"]
+        const secondPair = [2, "value_2"]
+        try {
+            const objCase1 = JSON.stringify({id:1,case_name:"test1"})
+            const objCase2 = JSON.stringify({id:2,case_name:"test2"})
+            await AsyncStorage.multiSet([["case_1",objCase1],["case_2",objCase2]])
+        }   catch(e) {
+          //save error
+        }
+      
+        // console.log("Done.")
+    };
+    const deleteById = (name:string) => {
+        setLocalStorage(oldValues => {
+            return oldValues.filter((local_data:any) => local_data.company_name !== name)
+        })
+    };
+    const removeValue = async (key:string) => {
+        try {
+            // console.log("keyDelete",key);
+          await AsyncStorage.removeItem(key)
+        //   await getCount();
+        } catch(e) {
+        }
+    };
+    const selectSurveyType = () => {
+        // console.log(selectedSurveyType);
+        if(selectedSurveyType==='PJU'){
+            getDataPJU()
+        }
+        if(selectedSurveyType==='PDAM'){
+            getDataPDAM()
+        }
+        if(selectedSurveyType==='PERMIT'){
+            getDataPermit()
+        }
+    };
+    const getDataPJU = async () => {
+        setLocalStorage([])
+        try {
+            const jsonValue = await AsyncStorage.getAllKeys()
+            // console.log("All Key",jsonValue)
+                if(jsonValue.length != 0) {
+                    jsonValue.map((item) => {
+                        if(item != "USER_DATA" && item != "my-jwt"){
+                            let splited = item.split(" / ");
+                            const objectItem = {
+                                pju_name:splited[0],
+                                pju_type:splited[1],
+                                installation_date:splited[2],
+                                status:splited[3],
+                                keterangan:splited[4],
+                                long:splited[5],
+                                lat:splited[6]
+                            }
+                            // console.log(objectItem);
+                            
+                            if(splited[7] === 'draftPJU'){
+                                setLocalStorage(oldArray => [...oldArray,objectItem])
+                            }
+                        }
+                    })
+                }
+        } catch (e) {
+          // error reading value
+        }
+    };
+    const getDataPDAM = async () => {
+        setLocalStorage([])
+        try {
+            const jsonValue = await AsyncStorage.getAllKeys()
+            // console.log("All Key",jsonValue.length)
+            if(jsonValue.length != 0) {
+                jsonValue.map((item) => {
+                    if(item != "USER_DATA" && item != "my-jwt"){
+                        let splited = item.split(" / ");
+                        if(splited.length === 7){
+                            const objectItem = {
+                                pipe_name:splited[0],
+                                pipe_type:splited[1],
+                                installation_date:splited[2],
+                                status:splited[3],
+                                keterangan:splited[4],
+                                geom:splited[5].split(",")
+                            }
+                            // console.log(objectItem);
+                            
+                            if(splited[6] === 'draftPDAM'){
+                                setLocalStorage(oldArray => [...oldArray,objectItem])
+                            }
+                        }
+                        
+                    }
+                })
+            }
+        } catch (error) {
+            
+        }
+    };
+    const getDataPermit = async () => {
+        setLocalStorage([])
+        try {
+            const jsonValue = await AsyncStorage.getAllKeys()
+            console.log("All Key",jsonValue)
+            if(jsonValue.length != 0) {
+                jsonValue.map((item) => {
+                    if(item != "USER_DATA" && item != "my-jwt"){
+                        let splited = item.split(" / ");
+                        console.log(splited.length);
+                        
+                        if(splited.length === 5){
+                            const objectItem = {
+                                company_name:splited[0],
+                                permit_status:splited[1],
+                                location:splited[2],
+                                geom:splited[3].split(",")
+                            }
+                            // console.log(objectItem);
+                            
+                            if(splited[4] === 'draftPermit'){
+                                setLocalStorage(oldArray => [...oldArray,objectItem])
+                            }
+                        }
+                        
+                    }
+                })
+            }
+        } catch (error) {
+            
+        }
+    };
+    const isFocused = useIsFocused();
+    useEffect(() => {
+        if(isFocused){
+            getDataPermit();
+            const unsubscribe = NetInfo.addEventListener((state) => {
+                setConnected(state.isConnected!)
+              });
+              return () => {
+                unsubscribe();
+            };
+        };
+    },[isFocused])
+    const [draftData, setDraftData] = useState(0);
+    navigation.addListener('beforeRemove', (e:any)=> {
+    });
+    const [stringFilter,setStingFilter] = useState('')
+    const handleSearch = (text:string) => {
+        // console.log(text);
+        
+        const formattedQuery = text.toLowerCase();
+        const filteredData = localStorage.filter(data =>
+            data.case_name.toLowerCase().includes(formattedQuery)
+        )
+        setFilterData(filteredData)
+
+    };
+    const reSend = async (data:any) => {
+        if(connected){
+            if(selectedSurveyType==="PJU"){
+                try {
+                    const result = {
+                        status: 0,
+                        body: {},
+                    }
+                    await RNFetchBlob.config({
+                        trusty : true
+                    }).fetch('POST', `${PJU_API_URL}/addData`,{
+                        "Accept": 'application/json',
+                        "Content-Type": "application/json",
+                        },
+                        JSON.stringify({
+                            nama: data.nama,
+                            jenis: data.jenis,
+                            tanggal_installasi: data.date,
+                            status: data.status,
+                            keterangan: data.keterangan,
+                            geom: `POINT(${data.long} ${data.lat})`
+                        })
+                    ).then(async (resp) => {
+                        const status = resp.respInfo.status
+                        if (status == 201) {
+                            deleteById(data.nama);
+                            removeValue(data.nama+" / "+data.jenis+" / "+data.date+" / "+data.status+" / "+data.keterangan+" / "+data.long+" / "+data.lat+" / draftPJU");
+                        }
+                        else {
+                            Alert.alert("Internal Server Error")
+                        }
+                    })
+                } catch (error) {
+                    Alert.alert("Internal Server Error")
+                }
+            }
+            if(selectedSurveyType==="PDAM"){
+                try {
+                    const obj = {
+                        nama: data.nama,
+                        jenis: data.jenis,
+                        tanggal_installasi: data.date,
+                        status: data.status,
+                        keterangan: data.keterangan,
+                        geom: `MULTILINESTRING((${data.geom}))`
+                    };
+                    await RNFetchBlob.config({
+                        trusty : true
+                    }).fetch('POST', `${PDAM_API_URL}/addData`,{
+                        "Content-Type": "application/json",
+                        },
+                        JSON.stringify(obj)
+                    ).then(async(resp) => {
+                        const json = resp.json();
+                        const status = resp.respInfo.status
+                        if (status == 201) {
+                            deleteById(data.nama);
+                            removeValue(data.nama+" / "+data.jenis+" / "+data.date+" / "+data.status+" / "+data.keterangan+" / "+data.geom+" / draftPDAM");
+                        }
+                        else {
+                            Alert.alert("Internal Server Error")
+                        }
+                    })
+                } catch (error) {
+                    Alert.alert("Internal Server Error");
+                }
+                
+            }
+            if(selectedSurveyType==="PERMIT"){
+                try {
+                    const obj = {
+                        company_name: data.company_name,
+                        location: data.location,
+                        permit_status: data.permit_status,
+                        geom: `MULTIPOLYGON (((${data.geom},${String(data.geom).split(",")[0]})))`
+                    }
+                    await RNFetchBlob.config({
+                        trusty : true
+                    }).fetch('POST', `${PERMIT_API_URL}/addData`,{
+                        "Content-Type": "application/json",
+                        },
+                        JSON.stringify(obj)
+                    ).then(async(resp) => {
+                        const json = await resp.json();
+                        const status = resp.respInfo.status;
+                        if (status == 201) {
+                            deleteById(data.company_name);
+                            removeValue(data.company_name+" / "+data.permit_status+" / "+data.location+" / "+data.geom+" / draftPermit");
+                        }
+                        else {
+                            Alert.alert("Internal Server Error")
+                        }
+                    }) 
+                } catch (error) {
+                    Alert.alert("Internal Server Error")
+                }
+                
+            }
+        }
+        else{
+            setAlertOffline(true)
+        }
+    };
+    const optionsStyles = {
+        optionsContainer: {
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            width:100,
+            marginVertical:-10,
+            marginLeft:-10,
+            backgroundColor: '#FFFFFF',
+            borderRadius: 5,
+            shadowColor: '#00000040',
+            shadowOffset: {
+                width: 0,
+                height: 2,
+            },
+            borderColor:'#6B5E5E4D',
+            borderWidth:1,
+            shadowOpacity: 0.2,
+            shadowRadius: 6,
+            elevation: 5,
+        },
+        optionText: {
+          color: 'brown',
+        },
+    };
+    return(
+        <View style={styles.mainContainer}>
+            <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
+            <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'93%'}} />
+            <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,marginTop:10}}>
+                <View key={"Filter"} style={{paddingLeft:30,paddingTop:30,paddingRight:30,marginTop:10}}>
+                    <TextInput
+                        style={{
+                            height: 40,
+                            padding: 10,
+                            borderRadius: 50,
+                            color: 'black',
+                            backgroundColor:'#e6e3e3'
+                        }}
+                        inlineImageLeft="search"
+                        inlineImagePadding={20}
+                        placeholderTextColor={'#6B5E5E'}
+                        placeholder='Search'
+                        onChangeText={queryText => {handleSearch(queryText),setStingFilter(queryText)}}
+                        defaultValue={stringFilter}
+                    />
+                </View>
+                <ScrollView 
+                    style={{
+                        padding: 30
+                    }}
+                    refreshControl={
+                        <RefreshControl refreshing={refreshing} />
+                    }
+                >
+                    { 
+                        localStorage.length != 0 ? 
+                        localStorage.map((item:any,index:number) => (
+                        <View key={index}>
+                            <View style={{flexDirection:'row'}}>
+                                <View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}>
+                                    <Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Company Name</Text>
+                                    <Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Permit Status</Text>
+                                    <Text style={{fontSize:14,color:'#000000',fontWeight:'600',padding:5}}>Location</Text>
+                                </View>
+                                <View style={{ flexDirection:'column',paddingLeft:0,width:'65%'}}>
+                                    <Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.company_name}</Text>
+                                    <Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.permit_status}</Text>
+                                    <Text style={{fontSize:14,fontWeight:'400',color:'#000000',padding:5}}>: {item.location}</Text>
+                                </View>
+                                <View style={{ marginLeft:'55%',marginTop:0,width:150,height:100,position:'absolute'}}>
+                                    <MenuProvider skipInstanceCheck={true} style={{flexDirection:'column'}}>
+                                        <Menu>
+                                            <MenuTrigger>
+                                                <Image
+                                                    style={{justifyContent:'center',alignSelf:'flex-end'}}
+                                                    source={require('../../assets/icon/Actions.png')}
+                                                    resizeMode='cover'
+                                                />
+                                            </MenuTrigger>
+                                            <MenuOptions customStyles={optionsStyles}>
+                                                <MenuOption
+                                                    onSelect={()=>{
+                                                        navigation.navigate('Permit Editing',{ screen: 'Edit',data: {
+                                                            id:item.id,
+                                                            company_name:item.company_name,
+                                                            permit_status:item.permit_status,
+                                                            location:item.location,
+                                                        }});
+                                                    }}
+                                                    children={
+                                                        <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
+                                                            <Image source={require('../../assets/icon/edit.png')} />
+                                                            <Text style={{marginLeft:10,color:'#6B5E5EB2',fontSize:14,fontWeight:400}}>Edit</Text>
+                                                        </View>} 
+                                                />
+                                                <View style={{marginVertical: 5, width:85,
+                                                marginHorizontal: 2,
+                                                borderBottomWidth: 1,
+                                                borderColor: '#ccc'}}
+                                                />
+                                                <MenuOption
+                                                    onSelect={()=> {
+                                                        deleteById(item.company_name);
+                                                        removeValue(item.company_name+" / "+item.permit_status+" / "+item.location+" / "+item.geom+" / draftPermit");
+                                                    }}
+                                                    children={
+                                                        <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
+                                                            <Image source={require('../../assets/icon/dell.png')} />
+                                                            <Text style={{marginLeft:10,color:'#6B5E5EB2',fontSize:14,fontWeight:400}}>Delete</Text>
+                                                        </View>
+                                                    }
+                                                />
+                                            </MenuOptions>
+                                        </Menu>
+                                    </MenuProvider>
+                                </View>
+                            </View>
+                            <View
+                                style={{
+                                    marginTop: 10,
+                                    marginBottom: 10,
+                                    borderBottomColor: '#E2E2E2',
+                                    borderBottomWidth: 2,
+                                }}
+                            />
+                            </View> 
+                            ))
+                        :
+                        <View style={{alignItems:'center',padding:20}}>
+                            <Text style={{fontSize:16,color:'grey'}}>Data Kosong</Text>
+                        </View>
+                    }
+                    
+                </ScrollView>
+            </View>
+            <AwesomeAlert
+                show={alertOffline}
+                showProgress={false}
+                title="You are offline"
+                message="You need connection for Resend Data."
+                closeOnTouchOutside={false}
+                closeOnHardwareBackPress={false}
+                showConfirmButton={true}
+                confirmText="Ok"
+                confirmButtonColor="#DD6B55"
+                onConfirmPressed={() => {
+                    setAlertOffline(false);
+                }}
+                overlayStyle={{width:'100%'}}
+                contentContainerStyle={{width:'70%',borderRadius:10}}
+                titleStyle={{fontSize:20}}
+                messageStyle={{fontSize:16}}
+            />
+            {/* <Button onPress={getDataAll} title='GetDataByKey'/> */}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#ecf0f1',
+        padding: 10,
+      },
+    mainContainer: {
+        flex: 1,
+    },
+    title: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'center',
+        fontWeight: 'bold',
+        fontSize: 22,
+        color: 'black',
+        marginBottom: 10
+    },
+    input: {
+        height: 40,
+        borderWidth: 1,
+        padding: 10,
+        borderRadius: 50,
+        color: 'black'
+    },
+});
+
+export default DraftPermit;

src/component/draftscreen copy 2.tsx

@@ -1,646 +0,0 @@
-import { Alert, Animated, Keyboard, RefreshControl } from 'react-native';
-import {
-  TextInput,
-  Button,
-  PermissionsAndroid,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-  Image,
-  TouchableOpacity,
-  ScrollView,
-  FlatList,
-  Dimensions
-} from 'react-native';
-
-import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native';
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
-
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { useCallback, useEffect, useState } from 'react';
-import { width } from '@fortawesome/free-solid-svg-icons/faMugSaucer';
-import { SelectList } from 'react-native-dropdown-select-list';
-import { PDAM_API_URL, PERMIT_API_URL, PJU_API_URL } from '../../urlConfig';
-import AwesomeAlert from 'react-native-awesome-alerts';
-import NetInfo from "@react-native-community/netinfo";
-import Moment from 'moment';
-import RNFetchBlob from 'rn-fetch-blob';
-
-type sendListDataProps = {route: any,navigation: any};
-function DraftListScreen({route,navigation}: sendListDataProps) {
-    const survey_Type = [
-        {key:'PJU', value:'PJU'},
-        {key:'PERMIT', value:'PERMIT'},
-        {key:'PDAM', value:'PDAM'},
-    ]
-    const [selectedSurveyType, setselectedSurveyType] = useState("");
-    const [refreshing, setRefreshing] = useState(false);
-    const onRefresh = useCallback(() => {
-        setRefreshing(true);
-        setTimeout(() => {
-          setRefreshing(false);
-        }, 2000);
-    }, []);
-    const [localStorage, setLocalStorage] = useState([]);
-    const [filterData, setFilterData] = useState([]);
-    const [surveyType, setSurveyType] = useState("");
-    const [alertOffline, setAlertOffline] = useState(false);
-    const [connected, setConnected] = useState(true)
-    const storeData = async (value:any) => {
-        // console.log("key",value.case_name)
-        
-        try {
-            const jsonValue = JSON.stringify(value);
-          await AsyncStorage.setItem(String(value.case_id)+" / "+String(value.case_name)+" / "+String(value.case_category)+" / "+"3PA-01"+" / "+String(value.case_risk),jsonValue);
-        } catch (e) {
-          // saving error
-        }
-    };
-    const multiSet = async () => {
-        const firstPair = [1, "value_1"]
-        const secondPair = [2, "value_2"]
-        try {
-            const objCase1 = JSON.stringify({id:1,case_name:"test1"})
-            const objCase2 = JSON.stringify({id:2,case_name:"test2"})
-            await AsyncStorage.multiSet([["case_1",objCase1],["case_2",objCase2]])
-        }   catch(e) {
-          //save error
-        }
-      
-        // console.log("Done.")
-    }
-    const deleteById = (name:string) => {
-        if(selectedSurveyType==="PJU"){
-            setLocalStorage(oldValues => {
-                return oldValues.filter((local_data:any) => local_data.pju_name !== name)
-            })
-        }
-        if(selectedSurveyType==="PDAM"){
-            setLocalStorage(oldValues => {
-                return oldValues.filter((local_data:any) => local_data.pipe_name !== name)
-            })
-        }
-        if(selectedSurveyType==="PERMIT"){
-            setLocalStorage(oldValues => {
-                return oldValues.filter((local_data:any) => local_data.company_name !== name)
-            })
-        }
-    }
-    const removeValue = async (key:string) => {
-        try {
-            // console.log("keyDelete",key);
-          await AsyncStorage.removeItem(key)
-        //   await getCount();
-        } catch(e) {
-        }
-    }
-    const selectSurveyType = () => {
-        // console.log(selectedSurveyType);
-        if(selectedSurveyType==='PJU'){
-            getDataPJU()
-        }
-        if(selectedSurveyType==='PDAM'){
-            getDataPDAM()
-        }
-        if(selectedSurveyType==='PERMIT'){
-            getDataPermit()
-        }
-    }
-    const getDataPJU = async () => {
-        setLocalStorage([])
-        try {
-            const jsonValue = await AsyncStorage.getAllKeys()
-            // console.log("All Key",jsonValue)
-                if(jsonValue.length != 0) {
-                    jsonValue.map((item) => {
-                        if(item != "USER_DATA" && item != "my-jwt"){
-                            let splited = item.split(" / ");
-                            const objectItem = {
-                                pju_name:splited[0],
-                                pju_type:splited[1],
-                                installation_date:splited[2],
-                                status:splited[3],
-                                keterangan:splited[4],
-                                long:splited[5],
-                                lat:splited[6]
-                            }
-                            // console.log(objectItem);
-                            
-                            if(splited[7] === 'draftPJU'){
-                                setLocalStorage(oldArray => [...oldArray,objectItem])
-                            }
-                        }
-                    })
-                }
-        } catch (e) {
-          // error reading value
-        }
-    };
-    const getDataPDAM = async () => {
-        setLocalStorage([])
-        try {
-            const jsonValue = await AsyncStorage.getAllKeys()
-            // console.log("All Key",jsonValue.length)
-            if(jsonValue.length != 0) {
-                jsonValue.map((item) => {
-                    if(item != "USER_DATA" && item != "my-jwt"){
-                        let splited = item.split(" / ");
-                        if(splited.length === 7){
-                            const objectItem = {
-                                pipe_name:splited[0],
-                                pipe_type:splited[1],
-                                installation_date:splited[2],
-                                status:splited[3],
-                                keterangan:splited[4],
-                                geom:splited[5].split(",")
-                            }
-                            // console.log(objectItem);
-                            
-                            if(splited[6] === 'draftPDAM'){
-                                setLocalStorage(oldArray => [...oldArray,objectItem])
-                            }
-                        }
-                        
-                    }
-                })
-            }
-        } catch (error) {
-            
-        }
-    }
-    const getDataPermit = async () => {
-        setLocalStorage([])
-        try {
-            const jsonValue = await AsyncStorage.getAllKeys()
-            console.log("All Key",jsonValue)
-            if(jsonValue.length != 0) {
-                jsonValue.map((item) => {
-                    if(item != "USER_DATA" && item != "my-jwt"){
-                        let splited = item.split(" / ");
-                        console.log(splited.length);
-                        
-                        if(splited.length === 5){
-                            const objectItem = {
-                                company_name:splited[0],
-                                permit_status:splited[1],
-                                location:splited[2],
-                                geom:splited[3].split(",")
-                            }
-                            // console.log(objectItem);
-                            
-                            if(splited[4] === 'draftPermit'){
-                                setLocalStorage(oldArray => [...oldArray,objectItem])
-                            }
-                        }
-                        
-                    }
-                })
-            }
-        } catch (error) {
-            
-        }
-    }
-    const isFocused = useIsFocused();
-    useEffect(() => {
-        if(isFocused){
-            const unsubscribe = NetInfo.addEventListener((state) => {
-                setConnected(state.isConnected!)
-              });
-              return () => {
-                unsubscribe();
-            };
-        };
-    },[isFocused])
-    const [draftData, setDraftData] = useState(0);
-    navigation.addListener('beforeRemove', (e:any)=> {
-        // Alert.alert(String(draftData))
-        
-        // route.params.onGoBack(draftData);
-    })
-    const getCount = async () => {
-        try {
-          const jsonValue = await AsyncStorage.getAllKeys()
-          let index = 0;
-          jsonValue.map((item) => {
-            if(item != "USER_DATA" && item != "my-jwt"){
-                let splited = item.split(" / ");
-                if(splited[4] === 'draftPJU'){
-                    index+=1
-                }
-            }
-            setDraftData(index)
-        })
-        } catch (e) {
-        }
-    };
-    const [stringFilter,setStingFilter] = useState('')
-    const handleSearch = (text:string) => {
-        // console.log(text);
-        
-        const formattedQuery = text.toLowerCase();
-        const filteredData = localStorage.filter(data =>
-            data.case_name.toLowerCase().includes(formattedQuery)
-        )
-        setFilterData(filteredData)
-
-    };
-    const getDataAll = async () => {
-        try {
-          const jsonValue = await AsyncStorage.getAllKeys()
-        // console.log("All",jsonValue)
-        //   return jsonValue != null ? JSON.parse(jsonValue) : null;
-        } catch (e) {
-          // error reading value
-        }
-    };
-    const getDataItem = async () => {
-        try {
-          const jsonValue = await AsyncStorage.getItem("120 / test1 / Structure Damage Missing / SDM-1 / 1. High")
-        //   console.log("pure",jsonValue)
-          return jsonValue != null ? JSON.parse(jsonValue) : null;
-        } catch (e) {
-          // error reading value
-        }
-    };
-    const getMultiple = async () => {
-        try {
-        await AsyncStorage.removeItem("141 / Case 1 / Structure Damage Missing / SDM-01 / 2. Medium / draft")
-        } catch(e) {
-        }
-    }
-    const reSend = async (data:any) => {
-        if(connected){
-            if(selectedSurveyType==="PJU"){
-                try {
-                    const result = {
-                        status: 0,
-                        body: {},
-                    }
-                    await RNFetchBlob.config({
-                        trusty : true
-                    }).fetch('POST', `${PJU_API_URL}/addData`,{
-                        "Accept": 'application/json',
-                        "Content-Type": "application/json",
-                        },
-                        JSON.stringify({
-                            nama: data.nama,
-                            jenis: data.jenis,
-                            tanggal_installasi: data.date,
-                            status: data.status,
-                            keterangan: data.keterangan,
-                            geom: `POINT(${data.long} ${data.lat})`
-                        })
-                    ).then(async (resp) => {
-                        const status = resp.respInfo.status
-                        if (status == 201) {
-                            deleteById(data.nama);
-                            removeValue(data.nama+" / "+data.jenis+" / "+data.date+" / "+data.status+" / "+data.keterangan+" / "+data.long+" / "+data.lat+" / draftPJU");
-                        }
-                        else {
-                            Alert.alert("Internal Server Error")
-                        }
-                    })
-                } catch (error) {
-                    Alert.alert("Internal Server Error")
-                }
-            }
-            if(selectedSurveyType==="PDAM"){
-                try {
-                    const obj = {
-                        nama: data.nama,
-                        jenis: data.jenis,
-                        tanggal_installasi: data.date,
-                        status: data.status,
-                        keterangan: data.keterangan,
-                        geom: `MULTILINESTRING((${data.geom}))`
-                    };
-                    await RNFetchBlob.config({
-                        trusty : true
-                    }).fetch('POST', `${PDAM_API_URL}/addData`,{
-                        "Content-Type": "application/json",
-                        },
-                        JSON.stringify(obj)
-                    ).then(async(resp) => {
-                        const json = resp.json();
-                        const status = resp.respInfo.status
-                        if (status == 201) {
-                            deleteById(data.nama);
-                            removeValue(data.nama+" / "+data.jenis+" / "+data.date+" / "+data.status+" / "+data.keterangan+" / "+data.geom+" / draftPDAM");
-                        }
-                        else {
-                            Alert.alert("Internal Server Error")
-                        }
-                    })
-                } catch (error) {
-                    Alert.alert("Internal Server Error");
-                }
-                
-            }
-            if(selectedSurveyType==="PERMIT"){
-                try {
-                    const obj = {
-                        company_name: data.company_name,
-                        location: data.location,
-                        permit_status: data.permit_status,
-                        geom: `MULTIPOLYGON (((${data.geom},${String(data.geom).split(",")[0]})))`
-                    }
-                    await RNFetchBlob.config({
-                        trusty : true
-                    }).fetch('POST', `${PERMIT_API_URL}/addData`,{
-                        "Content-Type": "application/json",
-                        },
-                        JSON.stringify(obj)
-                    ).then(async(resp) => {
-                        const json = await resp.json();
-                        const status = resp.respInfo.status;
-                        if (status == 201) {
-                            deleteById(data.company_name);
-                            removeValue(data.company_name+" / "+data.permit_status+" / "+data.location+" / "+data.geom+" / draftPermit");
-                        }
-                        else {
-                            Alert.alert("Internal Server Error")
-                        }
-                    }) 
-                } catch (error) {
-                    Alert.alert("Internal Server Error")
-                }
-                
-            }
-        }
-        else{
-            setAlertOffline(true)
-        }
-    }
-    return(
-        <View style={styles.mainContainer}>
-            {/* <RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> */}
-            {/* <TextInput
-                style={styles.input}
-                placeholder='Search'
-                onChangeText={queryText => {handleSearch(queryText),setStingFilter(queryText)}}
-            /> */}
-            <SelectList
-                search={false}
-                placeholder="Select Survey Type"
-                boxStyles={{borderRadius:50,borderWidth:2,borderColor:'black'}}
-                inputStyles={{color:'black'}}
-                dropdownTextStyles={{color:'black'}}
-                data={survey_Type}
-                setSelected={setselectedSurveyType}
-                onSelect={selectSurveyType}
-            />
-            <ScrollView style={styles.container}
-            refreshControl={
-                <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-            }>
-                {selectedSurveyType=="PJU" && localStorage.length != 0? 
-                localStorage.map((item:any,index:number) => (
-                    <View key={index}>
-                        <View style={{flexDirection:'row'}}>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}>
-                                <Text style={{fontSize:16,color:'black'}}>Nama JPU</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Jenis</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Tanggal Installasi</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Status</Text>
-                            </View>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'45%'}}>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pju_name}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pju_type}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.installation_date}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.status}</Text>
-                            </View>
-                            <View style={{flexDirection:'column',width:'20%'}}>
-                                <View style={{}}>
-                                    <View>
-                                        <TouchableOpacity onPress={()=> {
-                                            deleteById(item.pju_name);
-                                            removeValue(item.pju_name+" / "+item.pju_type+" / "+item.installation_date+" / "+item.status+" / "+item.keterangan+" / "+item.long+" / "+item.lat+" / draftPJU");
-                                        }}>
-                                            <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
-                                                <Image
-                                                    source={require('../../assets/icon/delete.png')}
-                                                    style={{width:25,height:25}}
-                                                />
-                                                {/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */}
-                                            </View>
-                                        </TouchableOpacity>
-                                    </View>
-                                </View>
-                                <View style={{}}>
-                                    <View>
-                                        <TouchableOpacity onPress={()=> {reSend({
-                                                nama:item.pju_name,
-                                                jenis:item.pju_type,
-                                                date:Moment(new Date(item.installation_date)).format('YYYY-MM-DD'),
-                                                status:item.status,
-                                                keterangan:item.keterangan,
-                                                long:item.long,
-                                                lat:item.lat
-                                            })}}>
-                                            <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
-                                                <Image
-                                                    source={require('../../assets/icon/send.png')}
-                                                    style={{width:25,height:25}}
-                                                />
-                                                {/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */}
-                                            </View>
-                                        </TouchableOpacity>
-                                    </View>
-                                </View>
-                            </View>
-                        </View>
-                        <View
-                            style={{
-                                marginTop: 10,
-                                marginBottom: 10,
-                                borderBottomColor: 'black',
-                                borderBottomWidth: 1,
-                            }}
-                        />
-                    </View> 
-                ))
-                :
-                selectedSurveyType=="PDAM" && localStorage.length != 0 ? 
-                localStorage.map((item:any,index:number) => (
-                    <View key={index}>
-                        <View style={{flexDirection:'row'}}>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}>
-                                <Text style={{fontSize:16,color:'black'}}>Nama Pipa</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Jenis</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Tanggal Installasi</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Status</Text>
-                            </View>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'45%'}}>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pipe_name}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pipe_type}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.installation_date}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.status}</Text>
-                            </View>
-                            <View style={{flexDirection:'column',width:'20%'}}>
-                                <View style={{}}>
-                                    <View>
-                                        <TouchableOpacity onPress={()=> {
-                                            deleteById(item.pipe_name);
-                                            removeValue(item.pipe_name+" / "+item.pipe_type+" / "+item.installation_date+" / "+item.status+" / "+item.keterangan+" / "+item.geom+" / draftPDAM");
-                                        }}>
-                                            <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
-                                                <Image
-                                                    source={require('../../assets/icon/delete.png')}
-                                                    style={{width:25,height:25}}
-                                                />
-                                            </View>
-                                        </TouchableOpacity>
-                                    </View>
-                                </View>
-                                <View style={{}}>
-                                        <View>
-                                            <TouchableOpacity onPress={()=> {reSend({
-                                                    nama:item.pipe_name,
-                                                    jenis:item.pipe_type,
-                                                    date:Moment(new Date(item.installation_date)).format('YYYY-MM-DD'),
-                                                    status:item.status,
-                                                    keterangan:item.keterangan,
-                                                    geom:item.geom
-                                                })}}>
-                                                <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
-                                                    <Image
-                                                        source={require('../../assets/icon/send.png')}
-                                                        style={{width:25,height:25}}
-                                                    />
-                                                    {/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */}
-                                                </View>
-                                            </TouchableOpacity>
-                                        </View>
-                                </View>
-                            </View>
-                        </View>
-                        <View
-                            style={{
-                                marginTop: 10,
-                                marginBottom: 10,
-                                borderBottomColor: 'black',
-                                borderBottomWidth: 1,
-                            }}
-                        />
-                    </View> 
-                ))
-                :
-                selectedSurveyType=="PERMIT" && localStorage.length != 0 ?
-                localStorage.map((item:any,index:number) => (
-                    <View key={index}>
-                        <View style={{flexDirection:'row'}}>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}>
-                                <Text style={{fontSize:16,color:'black'}}>Company Name</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Permit Status</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Location</Text>
-                            </View>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'45%'}}>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.company_name}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.permit_status}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.location}</Text>
-                            </View>
-                            <View style={{flexDirection:'column',width:'20%'}}>
-                                <View style={{}}>
-                                    <View>
-                                        <TouchableOpacity onPress={()=> {
-                                            deleteById(item.company_name);
-                                            removeValue(item.company_name+" / "+item.permit_status+" / "+item.location+" / "+item.geom+" / draftPermit");
-                                        }}>
-                                            <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
-                                                <Image
-                                                    source={require('../../assets/icon/delete.png')}
-                                                    style={{width:25,height:25}}
-                                                />
-                                            </View>
-                                        </TouchableOpacity>
-                                    </View>
-                                </View>
-                                <View style={{}}>
-                                        <View>
-                                            <TouchableOpacity onPress={()=> {reSend({
-                                                    company_name:item.company_name,
-                                                    permit_status:item.permit_status,
-                                                    location:item.location,
-                                                    geom:item.geom
-                                                })}}>
-                                                <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
-                                                    <Image
-                                                        source={require('../../assets/icon/send.png')}
-                                                        style={{width:25,height:25}}
-                                                    />
-                                                    {/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */}
-                                                </View>
-                                            </TouchableOpacity>
-                                        </View>
-                                </View>
-                            </View>
-                        </View>
-                        <View
-                            style={{
-                                marginTop: 10,
-                                marginBottom: 10,
-                                borderBottomColor: 'black',
-                                borderBottomWidth: 1,
-                            }}
-                        />
-                    </View> 
-                ))
-                :
-                <View style={{alignItems:'center',padding:20}}>
-                    <Text style={{fontSize:16,color:'grey'}}>Data Kosong</Text>
-                </View>
-                }
-            </ScrollView>
-            <AwesomeAlert
-                show={alertOffline}
-                showProgress={false}
-                title="You are offline"
-                message="You need connection for Resend Data."
-                closeOnTouchOutside={false}
-                closeOnHardwareBackPress={false}
-                showConfirmButton={true}
-                confirmText="Ok"
-                confirmButtonColor="#DD6B55"
-                onConfirmPressed={() => {
-                    setAlertOffline(false);
-                }}
-                overlayStyle={{width:'100%'}}
-                contentContainerStyle={{width:'70%',borderRadius:10}}
-                titleStyle={{fontSize:20}}
-                messageStyle={{fontSize:16}}
-            />
-            {/* <Button onPress={getDataAll} title='GetDataByKey'/> */}
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#ecf0f1',
-        padding: 10,
-      },
-    mainContainer: {
-        flex: 1,
-        padding: 10,
-    },
-    title: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        alignSelf: 'center',
-        fontWeight: 'bold',
-        fontSize: 22,
-        color: 'black',
-        marginBottom: 10
-    },
-    input: {
-        height: 40,
-        borderWidth: 1,
-        padding: 10,
-        borderRadius: 50,
-        color: 'black'
-    },
-});
-
-export default DraftListScreen;

src/component/draftscreen copy 3.tsx

@@ -1,646 +0,0 @@
-import { Alert, Animated, Keyboard, RefreshControl } from 'react-native';
-import {
-  TextInput,
-  Button,
-  PermissionsAndroid,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-  Image,
-  TouchableOpacity,
-  ScrollView,
-  FlatList,
-  Dimensions
-} from 'react-native';
-
-import {useNavigation,NavigationContainer,useIsFocused} from '@react-navigation/native';
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
-
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { useCallback, useEffect, useState } from 'react';
-import { width } from '@fortawesome/free-solid-svg-icons/faMugSaucer';
-import { SelectList } from 'react-native-dropdown-select-list';
-import { PDAM_API_URL, PERMIT_API_URL, PJU_API_URL } from '../../urlConfig';
-import AwesomeAlert from 'react-native-awesome-alerts';
-import NetInfo from "@react-native-community/netinfo";
-import Moment from 'moment';
-import RNFetchBlob from 'rn-fetch-blob';
-
-type sendListDataProps = {route: any,navigation: any};
-function DraftListScreen({route,navigation}: sendListDataProps) {
-    const survey_Type = [
-        {key:'PJU', value:'PJU'},
-        {key:'PERMIT', value:'PERMIT'},
-        {key:'PDAM', value:'PDAM'},
-    ]
-    const [selectedSurveyType, setselectedSurveyType] = useState("");
-    const [refreshing, setRefreshing] = useState(false);
-    const onRefresh = useCallback(() => {
-        setRefreshing(true);
-        setTimeout(() => {
-          setRefreshing(false);
-        }, 2000);
-    }, []);
-    const [localStorage, setLocalStorage] = useState([]);
-    const [filterData, setFilterData] = useState([]);
-    const [surveyType, setSurveyType] = useState("");
-    const [alertOffline, setAlertOffline] = useState(false);
-    const [connected, setConnected] = useState(true)
-    const storeData = async (value:any) => {
-        // console.log("key",value.case_name)
-        
-        try {
-            const jsonValue = JSON.stringify(value);
-          await AsyncStorage.setItem(String(value.case_id)+" / "+String(value.case_name)+" / "+String(value.case_category)+" / "+"3PA-01"+" / "+String(value.case_risk),jsonValue);
-        } catch (e) {
-          // saving error
-        }
-    };
-    const multiSet = async () => {
-        const firstPair = [1, "value_1"]
-        const secondPair = [2, "value_2"]
-        try {
-            const objCase1 = JSON.stringify({id:1,case_name:"test1"})
-            const objCase2 = JSON.stringify({id:2,case_name:"test2"})
-            await AsyncStorage.multiSet([["case_1",objCase1],["case_2",objCase2]])
-        }   catch(e) {
-          //save error
-        }
-      
-        // console.log("Done.")
-    }
-    const deleteById = (name:string) => {
-        if(selectedSurveyType==="PJU"){
-            setLocalStorage(oldValues => {
-                return oldValues.filter((local_data:any) => local_data.pju_name !== name)
-            })
-        }
-        if(selectedSurveyType==="PDAM"){
-            setLocalStorage(oldValues => {
-                return oldValues.filter((local_data:any) => local_data.pipe_name !== name)
-            })
-        }
-        if(selectedSurveyType==="PERMIT"){
-            setLocalStorage(oldValues => {
-                return oldValues.filter((local_data:any) => local_data.company_name !== name)
-            })
-        }
-    }
-    const removeValue = async (key:string) => {
-        try {
-            // console.log("keyDelete",key);
-          await AsyncStorage.removeItem(key)
-        //   await getCount();
-        } catch(e) {
-        }
-    }
-    const selectSurveyType = () => {
-        // console.log(selectedSurveyType);
-        if(selectedSurveyType==='PJU'){
-            getDataPJU()
-        }
-        if(selectedSurveyType==='PDAM'){
-            getDataPDAM()
-        }
-        if(selectedSurveyType==='PERMIT'){
-            getDataPermit()
-        }
-    }
-    const getDataPJU = async () => {
-        setLocalStorage([])
-        try {
-            const jsonValue = await AsyncStorage.getAllKeys()
-            // console.log("All Key",jsonValue)
-                if(jsonValue.length != 0) {
-                    jsonValue.map((item) => {
-                        if(item != "USER_DATA" && item != "my-jwt"){
-                            let splited = item.split(" / ");
-                            const objectItem = {
-                                pju_name:splited[0],
-                                pju_type:splited[1],
-                                installation_date:splited[2],
-                                status:splited[3],
-                                keterangan:splited[4],
-                                long:splited[5],
-                                lat:splited[6]
-                            }
-                            // console.log(objectItem);
-                            
-                            if(splited[7] === 'draftPJU'){
-                                setLocalStorage(oldArray => [...oldArray,objectItem])
-                            }
-                        }
-                    })
-                }
-        } catch (e) {
-          // error reading value
-        }
-    };
-    const getDataPDAM = async () => {
-        setLocalStorage([])
-        try {
-            const jsonValue = await AsyncStorage.getAllKeys()
-            // console.log("All Key",jsonValue.length)
-            if(jsonValue.length != 0) {
-                jsonValue.map((item) => {
-                    if(item != "USER_DATA" && item != "my-jwt"){
-                        let splited = item.split(" / ");
-                        if(splited.length === 7){
-                            const objectItem = {
-                                pipe_name:splited[0],
-                                pipe_type:splited[1],
-                                installation_date:splited[2],
-                                status:splited[3],
-                                keterangan:splited[4],
-                                geom:splited[5].split(",")
-                            }
-                            // console.log(objectItem);
-                            
-                            if(splited[6] === 'draftPDAM'){
-                                setLocalStorage(oldArray => [...oldArray,objectItem])
-                            }
-                        }
-                        
-                    }
-                })
-            }
-        } catch (error) {
-            
-        }
-    }
-    const getDataPermit = async () => {
-        setLocalStorage([])
-        try {
-            const jsonValue = await AsyncStorage.getAllKeys()
-            console.log("All Key",jsonValue)
-            if(jsonValue.length != 0) {
-                jsonValue.map((item) => {
-                    if(item != "USER_DATA" && item != "my-jwt"){
-                        let splited = item.split(" / ");
-                        console.log(splited.length);
-                        
-                        if(splited.length === 5){
-                            const objectItem = {
-                                company_name:splited[0],
-                                permit_status:splited[1],
-                                location:splited[2],
-                                geom:splited[3].split(",")
-                            }
-                            // console.log(objectItem);
-                            
-                            if(splited[4] === 'draftPermit'){
-                                setLocalStorage(oldArray => [...oldArray,objectItem])
-                            }
-                        }
-                        
-                    }
-                })
-            }
-        } catch (error) {
-            
-        }
-    }
-    const isFocused = useIsFocused();
-    useEffect(() => {
-        if(isFocused){
-            const unsubscribe = NetInfo.addEventListener((state) => {
-                setConnected(state.isConnected!)
-              });
-              return () => {
-                unsubscribe();
-            };
-        };
-    },[isFocused])
-    const [draftData, setDraftData] = useState(0);
-    navigation.addListener('beforeRemove', (e:any)=> {
-        // Alert.alert(String(draftData))
-        
-        // route.params.onGoBack(draftData);
-    })
-    const getCount = async () => {
-        try {
-          const jsonValue = await AsyncStorage.getAllKeys()
-          let index = 0;
-          jsonValue.map((item) => {
-            if(item != "USER_DATA" && item != "my-jwt"){
-                let splited = item.split(" / ");
-                if(splited[4] === 'draftPJU'){
-                    index+=1
-                }
-            }
-            setDraftData(index)
-        })
-        } catch (e) {
-        }
-    };
-    const [stringFilter,setStingFilter] = useState('')
-    const handleSearch = (text:string) => {
-        // console.log(text);
-        
-        const formattedQuery = text.toLowerCase();
-        const filteredData = localStorage.filter(data =>
-            data.case_name.toLowerCase().includes(formattedQuery)
-        )
-        setFilterData(filteredData)
-
-    };
-    const getDataAll = async () => {
-        try {
-          const jsonValue = await AsyncStorage.getAllKeys()
-        // console.log("All",jsonValue)
-        //   return jsonValue != null ? JSON.parse(jsonValue) : null;
-        } catch (e) {
-          // error reading value
-        }
-    };
-    const getDataItem = async () => {
-        try {
-          const jsonValue = await AsyncStorage.getItem("120 / test1 / Structure Damage Missing / SDM-1 / 1. High")
-        //   console.log("pure",jsonValue)
-          return jsonValue != null ? JSON.parse(jsonValue) : null;
-        } catch (e) {
-          // error reading value
-        }
-    };
-    const getMultiple = async () => {
-        try {
-        await AsyncStorage.removeItem("141 / Case 1 / Structure Damage Missing / SDM-01 / 2. Medium / draft")
-        } catch(e) {
-        }
-    }
-    const reSend = async (data:any) => {
-        if(connected){
-            if(selectedSurveyType==="PJU"){
-                try {
-                    const result = {
-                        status: 0,
-                        body: {},
-                    }
-                    await RNFetchBlob.config({
-                        trusty : true
-                    }).fetch('POST', `${PJU_API_URL}/addData`,{
-                        "Accept": 'application/json',
-                        "Content-Type": "application/json",
-                        },
-                        JSON.stringify({
-                            nama: data.nama,
-                            jenis: data.jenis,
-                            tanggal_installasi: data.date,
-                            status: data.status,
-                            keterangan: data.keterangan,
-                            geom: `POINT(${data.long} ${data.lat})`
-                        })
-                    ).then(async (resp) => {
-                        const status = resp.respInfo.status
-                        if (status == 201) {
-                            deleteById(data.nama);
-                            removeValue(data.nama+" / "+data.jenis+" / "+data.date+" / "+data.status+" / "+data.keterangan+" / "+data.long+" / "+data.lat+" / draftPJU");
-                        }
-                        else {
-                            Alert.alert("Internal Server Error")
-                        }
-                    })
-                } catch (error) {
-                    Alert.alert("Internal Server Error")
-                }
-            }
-            if(selectedSurveyType==="PDAM"){
-                try {
-                    const obj = {
-                        nama: data.nama,
-                        jenis: data.jenis,
-                        tanggal_installasi: data.date,
-                        status: data.status,
-                        keterangan: data.keterangan,
-                        geom: `MULTILINESTRING((${data.geom}))`
-                    };
-                    await RNFetchBlob.config({
-                        trusty : true
-                    }).fetch('POST', `${PDAM_API_URL}/addData`,{
-                        "Content-Type": "application/json",
-                        },
-                        JSON.stringify(obj)
-                    ).then(async(resp) => {
-                        const json = resp.json();
-                        const status = resp.respInfo.status
-                        if (status == 201) {
-                            deleteById(data.nama);
-                            removeValue(data.nama+" / "+data.jenis+" / "+data.date+" / "+data.status+" / "+data.keterangan+" / "+data.geom+" / draftPDAM");
-                        }
-                        else {
-                            Alert.alert("Internal Server Error")
-                        }
-                    })
-                } catch (error) {
-                    Alert.alert("Internal Server Error");
-                }
-                
-            }
-            if(selectedSurveyType==="PERMIT"){
-                try {
-                    const obj = {
-                        company_name: data.company_name,
-                        location: data.location,
-                        permit_status: data.permit_status,
-                        geom: `MULTIPOLYGON (((${data.geom},${String(data.geom).split(",")[0]})))`
-                    }
-                    await RNFetchBlob.config({
-                        trusty : true
-                    }).fetch('POST', `${PERMIT_API_URL}/addData`,{
-                        "Content-Type": "application/json",
-                        },
-                        JSON.stringify(obj)
-                    ).then(async(resp) => {
-                        const json = await resp.json();
-                        const status = resp.respInfo.status;
-                        if (status == 201) {
-                            deleteById(data.company_name);
-                            removeValue(data.company_name+" / "+data.permit_status+" / "+data.location+" / "+data.geom+" / draftPermit");
-                        }
-                        else {
-                            Alert.alert("Internal Server Error")
-                        }
-                    }) 
-                } catch (error) {
-                    Alert.alert("Internal Server Error")
-                }
-                
-            }
-        }
-        else{
-            setAlertOffline(true)
-        }
-    }
-    return(
-        <View style={styles.mainContainer}>
-            {/* <RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> */}
-            {/* <TextInput
-                style={styles.input}
-                placeholder='Search'
-                onChangeText={queryText => {handleSearch(queryText),setStingFilter(queryText)}}
-            /> */}
-            <SelectList
-                search={false}
-                placeholder="Select Survey Type"
-                boxStyles={{borderRadius:50,borderWidth:2,borderColor:'black'}}
-                inputStyles={{color:'black'}}
-                dropdownTextStyles={{color:'black'}}
-                data={survey_Type}
-                setSelected={setselectedSurveyType}
-                onSelect={selectSurveyType}
-            />
-            <ScrollView style={styles.container}
-            refreshControl={
-                <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-            }>
-                {selectedSurveyType=="PJU" && localStorage.length != 0? 
-                localStorage.map((item:any,index:number) => (
-                    <View key={index}>
-                        <View style={{flexDirection:'row'}}>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}>
-                                <Text style={{fontSize:16,color:'black'}}>Nama JPU</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Jenis</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Tanggal Installasi</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Status</Text>
-                            </View>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'45%'}}>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pju_name}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pju_type}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.installation_date}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.status}</Text>
-                            </View>
-                            <View style={{flexDirection:'column',width:'20%'}}>
-                                <View style={{}}>
-                                    <View>
-                                        <TouchableOpacity onPress={()=> {
-                                            deleteById(item.pju_name);
-                                            removeValue(item.pju_name+" / "+item.pju_type+" / "+item.installation_date+" / "+item.status+" / "+item.keterangan+" / "+item.long+" / "+item.lat+" / draftPJU");
-                                        }}>
-                                            <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
-                                                <Image
-                                                    source={require('../../assets/icon/delete.png')}
-                                                    style={{width:25,height:25}}
-                                                />
-                                                {/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */}
-                                            </View>
-                                        </TouchableOpacity>
-                                    </View>
-                                </View>
-                                <View style={{}}>
-                                    <View>
-                                        <TouchableOpacity onPress={()=> {reSend({
-                                                nama:item.pju_name,
-                                                jenis:item.pju_type,
-                                                date:Moment(new Date(item.installation_date)).format('YYYY-MM-DD'),
-                                                status:item.status,
-                                                keterangan:item.keterangan,
-                                                long:item.long,
-                                                lat:item.lat
-                                            })}}>
-                                            <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
-                                                <Image
-                                                    source={require('../../assets/icon/send.png')}
-                                                    style={{width:25,height:25}}
-                                                />
-                                                {/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */}
-                                            </View>
-                                        </TouchableOpacity>
-                                    </View>
-                                </View>
-                            </View>
-                        </View>
-                        <View
-                            style={{
-                                marginTop: 10,
-                                marginBottom: 10,
-                                borderBottomColor: 'black',
-                                borderBottomWidth: 1,
-                            }}
-                        />
-                    </View> 
-                ))
-                :
-                selectedSurveyType=="PDAM" && localStorage.length != 0 ? 
-                localStorage.map((item:any,index:number) => (
-                    <View key={index}>
-                        <View style={{flexDirection:'row'}}>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}>
-                                <Text style={{fontSize:16,color:'black'}}>Nama Pipa</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Jenis</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Tanggal Installasi</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Status</Text>
-                            </View>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'45%'}}>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pipe_name}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.pipe_type}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.installation_date}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.status}</Text>
-                            </View>
-                            <View style={{flexDirection:'column',width:'20%'}}>
-                                <View style={{}}>
-                                    <View>
-                                        <TouchableOpacity onPress={()=> {
-                                            deleteById(item.pipe_name);
-                                            removeValue(item.pipe_name+" / "+item.pipe_type+" / "+item.installation_date+" / "+item.status+" / "+item.keterangan+" / "+item.geom+" / draftPDAM");
-                                        }}>
-                                            <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
-                                                <Image
-                                                    source={require('../../assets/icon/delete.png')}
-                                                    style={{width:25,height:25}}
-                                                />
-                                            </View>
-                                        </TouchableOpacity>
-                                    </View>
-                                </View>
-                                <View style={{}}>
-                                        <View>
-                                            <TouchableOpacity onPress={()=> {reSend({
-                                                    nama:item.pipe_name,
-                                                    jenis:item.pipe_type,
-                                                    date:Moment(new Date(item.installation_date)).format('YYYY-MM-DD'),
-                                                    status:item.status,
-                                                    keterangan:item.keterangan,
-                                                    geom:item.geom
-                                                })}}>
-                                                <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
-                                                    <Image
-                                                        source={require('../../assets/icon/send.png')}
-                                                        style={{width:25,height:25}}
-                                                    />
-                                                    {/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */}
-                                                </View>
-                                            </TouchableOpacity>
-                                        </View>
-                                </View>
-                            </View>
-                        </View>
-                        <View
-                            style={{
-                                marginTop: 10,
-                                marginBottom: 10,
-                                borderBottomColor: 'black',
-                                borderBottomWidth: 1,
-                            }}
-                        />
-                    </View> 
-                ))
-                :
-                selectedSurveyType=="PERMIT" && localStorage.length != 0 ?
-                localStorage.map((item:any,index:number) => (
-                    <View key={index}>
-                        <View style={{flexDirection:'row'}}>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'35%'}}>
-                                <Text style={{fontSize:16,color:'black'}}>Company Name</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Permit Status</Text>
-                                <Text style={{fontSize:16,color:'black'}}>Location</Text>
-                            </View>
-                            <View style={{ flexDirection:'column',paddingLeft:0,width:'45%'}}>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.company_name}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.permit_status}</Text>
-                                <Text style={{fontSize:16,fontWeight:'bold',color:'black'}}>: {item.location}</Text>
-                            </View>
-                            <View style={{flexDirection:'column',width:'20%'}}>
-                                <View style={{}}>
-                                    <View>
-                                        <TouchableOpacity onPress={()=> {
-                                            deleteById(item.company_name);
-                                            removeValue(item.company_name+" / "+item.permit_status+" / "+item.location+" / "+item.geom+" / draftPermit");
-                                        }}>
-                                            <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
-                                                <Image
-                                                    source={require('../../assets/icon/delete.png')}
-                                                    style={{width:25,height:25}}
-                                                />
-                                            </View>
-                                        </TouchableOpacity>
-                                    </View>
-                                </View>
-                                <View style={{}}>
-                                        <View>
-                                            <TouchableOpacity onPress={()=> {reSend({
-                                                    company_name:item.company_name,
-                                                    permit_status:item.permit_status,
-                                                    location:item.location,
-                                                    geom:item.geom
-                                                })}}>
-                                                <View style={{flexDirection:'row',justifyContent:'flex-end',padding:6}}>
-                                                    <Image
-                                                        source={require('../../assets/icon/send.png')}
-                                                        style={{width:25,height:25}}
-                                                    />
-                                                    {/* <Text style={{fontSize:18,fontWeight:'bold'}}>View</Text> */}
-                                                </View>
-                                            </TouchableOpacity>
-                                        </View>
-                                </View>
-                            </View>
-                        </View>
-                        <View
-                            style={{
-                                marginTop: 10,
-                                marginBottom: 10,
-                                borderBottomColor: 'black',
-                                borderBottomWidth: 1,
-                            }}
-                        />
-                    </View> 
-                ))
-                :
-                <View style={{alignItems:'center',padding:20}}>
-                    <Text style={{fontSize:16,color:'grey'}}>Data Kosong</Text>
-                </View>
-                }
-            </ScrollView>
-            <AwesomeAlert
-                show={alertOffline}
-                showProgress={false}
-                title="You are offline"
-                message="You need connection for Resend Data."
-                closeOnTouchOutside={false}
-                closeOnHardwareBackPress={false}
-                showConfirmButton={true}
-                confirmText="Ok"
-                confirmButtonColor="#DD6B55"
-                onConfirmPressed={() => {
-                    setAlertOffline(false);
-                }}
-                overlayStyle={{width:'100%'}}
-                contentContainerStyle={{width:'70%',borderRadius:10}}
-                titleStyle={{fontSize:20}}
-                messageStyle={{fontSize:16}}
-            />
-            {/* <Button onPress={getDataAll} title='GetDataByKey'/> */}
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#ecf0f1',
-        padding: 10,
-      },
-    mainContainer: {
-        flex: 1,
-        padding: 10,
-    },
-    title: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        alignSelf: 'center',
-        fontWeight: 'bold',
-        fontSize: 22,
-        color: 'black',
-        marginBottom: 10
-    },
-    input: {
-        height: 40,
-        borderWidth: 1,
-        padding: 10,
-        borderRadius: 50,
-        color: 'black'
-    },
-});
-
-export default DraftListScreen;

src/component/homescreen.tsx

@@ -90,9 +90,11 @@ const img_1 = require('../../assets/img/Geonet_polos.png')
                         style={styles.buttonImageIconStyle}
                     />
                 </Pressable>
-                <Pressable>
+                <Pressable onPress={()=>{
+                    navigation.navigate('Setting', { screen: 'Setting', })
+                }}>
                     <Image
-                        source={require('../../assets/icon/Profile_Icon.png')}
+                        source={require('../../assets/icon/Setting.png')}
                         style={styles.buttonImageIconStyle}
                     />
                 </Pressable>

src/component/loginscreen.tsx

@@ -136,7 +136,7 @@ function LoginScreen({route,navigation}: LoginScreenProps): React.JSX.Element {
           </View>
           <View style={styles.rememberView}>
               <View style={styles.switch}>
-                  <Switch  value={click} onValueChange={setClick} trackColor={{true : "green" , false : "gray"}} />
+                  <Switch  value={click} onValueChange={setClick} trackColor={{true : "#0386D0" , false : "gray"}} thumbColor='#0386D0' />
                   <Text style={styles.rememberText}>Remember Me</Text>
               </View>
           </View>

src/component/mapCollectLineScreen.tsx

@@ -2,13 +2,10 @@ import React, {useState, useEffect} from "react";
 import { View, Text, StyleSheet, Alert, TouchableOpacity, Image } from "react-native";
 
 import MapLibreGL from '@maplibre/maplibre-react-native';
+import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
 import Geolocation from "@react-native-community/geolocation";
 
-MapLibreGL.setAccessToken(null);
 type MapCollectLineProps = {route: any,navigation: any}
-
-
-
 function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.Element{
     
     const apiKey = "JoJs2pcDv5o0yQlQLMfI";
@@ -111,24 +108,23 @@ function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.
 
     return(
         <View style={{flex:1}}>
-            <MapLibreGL.MapView
+            <MapView
                 style={{alignSelf:'stretch',flex:1}} 
-                styleURL={styleURL}
+                mapStyle={styleURL}
                 zoomEnabled={true}
                 onRegionDidChange={(region)=>
                     setZoom(region.properties.zoomLevel)
                 }
             >
-                <MapLibreGL.Camera
+                <Camera
                     key={"camera"}
                     centerCoordinate={currentPositionCamera}
-                    allowUpdates={true}
                     zoomLevel={zoom}
                     minZoomLevel={5}
                     maxZoomLevel={20}
                 />
                 {coordinates.length > 1 ?
-                    <MapLibreGL.ShapeSource
+                    <ShapeSource
                         id="line"
                         shape={{
                             "type": "FeatureCollection",
@@ -144,15 +140,15 @@ function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.
                             ]
                         }}  
                     >
-                        <MapLibreGL.LineLayer 
+                        <LineLayer 
                             id="linelayer1"
                             style={{lineColor:'red',lineWidth:3}}
                         />
-                    </MapLibreGL.ShapeSource>
+                    </ShapeSource>
                     :
                     null
                 }
-                <MapLibreGL.UserLocation
+                <UserLocation
                     key={"userLoc"}
                     androidRenderMode='compass'
                     renderMode='native'
@@ -162,7 +158,7 @@ function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.
                 />
                 {
                     startPoint.map((item:any,index:number)=>(
-                        <MapLibreGL.PointAnnotation
+                        <PointAnnotation
                             children={<></>}
                             key={index}
                             id={item}
@@ -178,7 +174,7 @@ function MapCollectLineScreen({route,navigation}:MapCollectLineProps):React.JSX.
                 }
                 
 
-            </MapLibreGL.MapView>
+            </MapView>
 
             {/* Widget Map */}
             <View style={styles.gotoLocate}>

src/component/mapCollectPolygonScreen.tsx

@@ -2,9 +2,8 @@ import React, {useState, useEffect, useRef} from "react";
 import { View, Text, StyleSheet, Alert, TouchableOpacity, Image } from "react-native";
 
 import MapLibreGL from '@maplibre/maplibre-react-native';
+import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
 import Geolocation from "@react-native-community/geolocation";
-
-MapLibreGL.setAccessToken(null);
 type MapCollectPolygonProps = {route: any,navigation: any}
 
 
@@ -124,25 +123,24 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
 
     return(
         <View style={{flex:1}}>
-            <MapLibreGL.MapView
+            <MapView
                 style={{alignSelf:'stretch',flex:1}} 
-                styleURL={styleURL}
+                mapStyle={styleURL}
                 zoomEnabled={true}
                 onRegionDidChange={(region)=>
                     setZoom(region.properties.zoomLevel)
                 }
             >
-                <MapLibreGL.Camera
+                <Camera
                     key={"camera"}
                     centerCoordinate={currentPositionCamera}
-                    allowUpdates={true}
                     zoomLevel={zoom}
                     minZoomLevel={5}
                     maxZoomLevel={20}
                 />
                 {
                     coordinates.length >= 4 ?
-                    <MapLibreGL.ShapeSource
+                    <ShapeSource
                         id="polygon"
                         shape={{
                             "type": "FeatureCollection",
@@ -160,22 +158,22 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
                             ]
                         }}  
                     >
-                        <MapLibreGL.LineLayer 
+                        <LineLayer 
                             id="linelayer1"
                             style={{lineColor:'red',lineWidth:1}}
                         />
-                        <MapLibreGL.FillLayer 
+                        <FillLayer 
                             id="some-fill-feature"
                             style={{
                                 fillColor: ['interpolate', ['linear'], ['zoom'], 0, '#eeddbb', 2, '#0daa00', 3, '#bbbbee'],
                                 fillOpacity:0.5
                             }}
                         />
-                    </MapLibreGL.ShapeSource>
+                    </ShapeSource>
                     :
                     null
                 }
-                <MapLibreGL.UserLocation
+                <UserLocation
                     key={"userLoc"}
                     androidRenderMode='compass'
                     renderMode='native'
@@ -184,7 +182,7 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
                 />
                 {
                     startPoint.map((item:any,index:number)=>(
-                        <MapLibreGL.PointAnnotation
+                        <PointAnnotation
                             children={<></>}
                             key={index}
                             id={item}
@@ -198,7 +196,7 @@ function MapCollectPolygonScreen({route,navigation}:MapCollectPolygonProps):Reac
                         />
                     ))
                 }
-            </MapLibreGL.MapView>
+            </MapView>
 
             {/* Widget Map */}
             <View style={styles.gotoLocate}>

src/component/mapCollectScreen.tsx

@@ -2,17 +2,18 @@ import React, {useState, useEffect, useRef} from "react";
 import { View, Text, StyleSheet, Alert, TouchableOpacity, Image, Modal, Pressable, FlatList, LogBox } from "react-native";
 
 import MapLibreGL from '@maplibre/maplibre-react-native';
+import { MapView,ShapeSource,Camera,UserLocation,PointAnnotation,FillLayer,LineLayer,VectorSource } from "@maplibre/maplibre-react-native";
 import Geolocation from "@react-native-community/geolocation";
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { TextInput } from "react-native-paper";
 import adminCountry from '../../assets/geojson/admKabKota.json';
 
-MapLibreGL.setAccessToken(null);
+// MapLibreGL.setAccessToken(null);
 type MapCollectProps = {route: any,navigation: any}
 
 function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
     const apiKey = "JoJs2pcDv5o0yQlQLMfI";
-    const [basemap, setBasemap] = useState("streets-v2");
+    const [basemap, setBasemap] = useState("streets");
     const styleURL = `https://api.maptiler.com/maps/${basemap}/style.json?key=${apiKey}`;
 
     const [currentPosition, setCurrentPosition] = useState<[number,number] | []>([0,0]);
@@ -112,12 +113,12 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
                     </View>
                 </TouchableOpacity>
             </View>
-            <MapLibreGL.MapView
+            <MapView
                 style={{alignSelf:'stretch',flex:1}} 
-                styleURL={styleURL}
+                mapStyle={styleURL}
                 zoomEnabled={true}
             >
-                <MapLibreGL.ShapeSource
+                {/* <ShapeSource
                     id="nyc"
                     shape={adminCountry}
                     onPress={(e)=>{
@@ -127,20 +128,21 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
                     }
                     }
                 >
-                    <MapLibreGL.FillLayer 
+                    <FillLayer 
                     id="nycFill"
                     style={{fillColor:'grey',fillOpacity:0.5}}
                     filter={['!=', 'avail', 'A']}
                     />
-                    <MapLibreGL.LineLayer
+                    <LineLayer
                     sourceID="nyc"
                     id="nycFillLine"
                     style={{lineColor: 'white', lineWidth:1}}
                     />
-                </MapLibreGL.ShapeSource>
+                </ShapeSource> */}
                 {!delayRender ?
                     <>
-                        <MapLibreGL.PointAnnotation
+                        <PointAnnotation
+                            children={<></>}
                             style={{zIndex:-1}}
                             id={"pjuCoordinate"}
                             coordinate={currentPosition!}
@@ -153,31 +155,39 @@ function MapCollectScreen({route,navigation}:MapCollectProps):React.JSX.Element{
                                 
                             }}
                         />
-                        <MapLibreGL.Camera
+                        <Camera
                             centerCoordinate={currentPosition!}
-                            allowUpdates={true}
                             zoomLevel={zoom}
                             minZoomLevel={5}
                             maxZoomLevel={20}
                         />
-                        <MapLibreGL.UserLocation
+                        <UserLocation
                             key={"userLoc"}
                             androidRenderMode='compass'
                             renderMode='native'
                             animated={true}
                             showsUserHeadingIndicator={true}
+                            children={
+                                <Pressable onPress={()=>{
+                                    Alert.alert('aaa')
+                                }}>
+                                    <View style={{width:20,height:20,backgroundColor:'red'}}>
+                                        
+                                    </View>
+                                </Pressable>
+                            }
                             
                         />
                         
                     </>
                 :
-                    <MapLibreGL.Camera
+                    <Camera
                         minZoomLevel={0}
                         maxZoomLevel={20}
                     />
                 }
                 
-            </MapLibreGL.MapView>
+            </MapView>
             {!delayRender ?
                 <TouchableOpacity style={{position:'absolute',alignSelf:'center',bottom:20}} onPress={SelectPosition}>
                     <View style={{backgroundColor:'#217dd3',flexDirection:'row',width:350,height:50,borderRadius:10,justifyContent:'center'}}>

src/component/myAccount.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import {
+    TextInput,
+    StatusBar,
+    StyleSheet,
+    Text,
+    View,
+    Image,
+    ScrollView,
+    RefreshControl,
+    Pressable,
+    TouchableOpacity,
+  } from 'react-native';
+import { useEffect, useState } from 'react';
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {useIsFocused} from '@react-navigation/native';
+import AwesomeAlert from "react-native-awesome-alerts";
+import LinearGradient from 'react-native-linear-gradient';
+
+export default function MyAccount() {
+    return(
+        <View style={{flex:1}}>
+            <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
+            <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'100%'}} />
+            <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,marginTop:10}}>
+                <View key={"image section"} style={{alignItems:'center',justifyContent:'center',paddingLeft: 10,paddingRight:10,marginTop:'10%',height:'20%'}}>
+                    <View key={"image container"} style={[{width:150,height:150,borderRadius:100,borderWidth:12,borderColor:'#EDEDED',alignItems:'center',justifyContent:'center',shadowColor:'black'}]}>
+                        <Image
+                            source={require('../../assets/img/mcf.jpg')}
+                            style={[{width:131,height:131,borderRadius:100}]}
+                        />
+                    </View>
+                </View>
+                <View key={"detail section"} style={{paddingLeft: 20,paddingRight:20,marginTop:'10%',height:'80%'}}>
+                    <View key={"name"} style={{marginBottom:20}}>
+                        <Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>Name :</Text>
+                        <TextInput style={{
+                            backgroundColor:'#F9F9F9',
+                            color:'#6B5E5E',
+                            height : 50,
+                            paddingHorizontal : 20,
+                            borderColor : "#A6A6A6",
+                            borderWidth : 1.5,
+                            borderRadius: 7,
+                        }} placeholderTextColor={'grey'} value={"Muhammad Choirul Fajri"} autoCorrect={false} autoCapitalize='none' />
+                    </View>
+                    <View key={"email"} style={{marginBottom:20}}>
+                        <Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>Email :</Text>
+                        <TextInput style={{
+                            backgroundColor:'#F9F9F9',
+                            color:'#6B5E5E',
+                            height : 50,
+                            paddingHorizontal : 20,
+                            borderColor : "#A6A6A6",
+                            borderWidth : 1.5,
+                            borderRadius: 7,
+                        }} placeholderTextColor={'grey'} autoComplete='email' value={"mfajri@geonet.co.id"} autoCorrect={false} autoCapitalize='none' />
+                    </View>
+                    <View key={"phone"} style={{marginBottom:20}}>
+                        <Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>Phone :</Text>
+                        <TextInput style={{
+                            backgroundColor:'#F9F9F9',
+                            color:'#6B5E5E',
+                            height : 50,
+                            paddingHorizontal : 20,
+                            borderColor : "#A6A6A6",
+                            borderWidth : 1.5,
+                            borderRadius: 7,
+                        }} placeholderTextColor={'grey'} value={"6281295807554"} autoCorrect={false} autoCapitalize='none' />
+                    </View>
+                    <View key={"address"} style={{marginBottom:20}}>
+                        <Text style={{color:'#3E434E',fontWeight:600,fontSize:14,marginBottom:10}}>Address :</Text>
+                        <TextInput
+                            multiline
+                            numberOfLines={5}
+                            maxLength={255}
+                            style={{
+                                backgroundColor:'#F9F9F9',
+                                color:'#6B5E5E',
+                                // height : 50,
+                                paddingHorizontal : 20,
+                                borderColor : "#A6A6A6",
+                                borderWidth : 1.5,
+                                borderRadius: 7,
+                                textAlignVertical:'top'
+                            }} placeholderTextColor={'grey'} value={"Bekasi, West Java"} autoCorrect={false} autoCapitalize='none'
+                        />
+                    </View>
+                    <View key={"Button"}>
+                        <TouchableOpacity>
+                            <View style={{
+                                paddingHorizontal : 20,
+                                backgroundColor:'#0386D0',
+                                // borderWidth : 1.5,
+                                borderRadius: 7,
+                                height : 50,
+                                alignItems:'center',
+                                justifyContent:'center'
+                            }}>
+                                <Text style={{color:'#F5F5F5',fontSize:16,fontWeight:600}}>Save</Text>
+                            </View>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            </View>
+        </View>
+    );
+}

src/component/settingScreen.tsx

@@ -0,0 +1,194 @@
+import React from "react";
+import {
+    TextInput,
+    StatusBar,
+    StyleSheet,
+    Text,
+    View,
+    Image,
+    ScrollView,
+    RefreshControl,
+    Pressable,
+    TouchableOpacity,
+  } from 'react-native';
+import { useEffect, useState } from 'react';
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {useIsFocused} from '@react-navigation/native';
+import AwesomeAlert from "react-native-awesome-alerts";
+import LinearGradient from 'react-native-linear-gradient';
+import { useAuth } from "./authContext";
+
+export default function SettingScreen({navigation}:any){
+    const { authState, onLogout} = useAuth();
+    const [iconActive,setIconActive] = useState('#0386D0')
+
+    // const logout = () => {
+    //     onLogout();
+    // }
+    return(
+        <View style={{flex:1}}>
+            <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
+            <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'93%'}} />
+            <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,marginTop:10}}>
+                <View style={{paddingLeft: 10,paddingRight:10,marginTop:'15%'}}>
+                    <LinearGradient
+                        colors={['#0386D0', '#02446A']}
+                        start={{x: 0, y: 0}}
+                        end={{x: 1, y: 1}}
+                        style={{
+                            width:'100%',
+                            height:90,
+                            borderRadius:10,
+                            paddingLeft:20,
+                            paddingRight:20,
+                            flexDirection:'row',
+                            alignItems:'center',
+                            columnGap:20
+                        }}
+                        >
+                        <View key={"image container"} style={[{width:70,height:70,borderRadius:100,borderWidth:4,borderColor:'white',alignItems:'center',justifyContent:'center'}]}>
+                            <Image
+                                source={require('../../assets/img/mcf.jpg')}
+                                style={[{width:65,height:65,borderRadius:100}]}
+                            />
+                        </View>
+                        <View>
+                            <Text style={{color:'#FFFFFF',fontSize:15,fontWeight:600}}>Muhammad Choirul Fajri</Text>
+                            <Text style={{color:'#FFFFFF',fontSize:13,fontWeight:400}}>mfajri@geonet.co.id</Text>
+                        </View>
+                    </LinearGradient>
+                    <View style={{marginTop:'5%'}}>
+                        <Text style={{fontWeight:600,fontSize:18,color:'#000000',padding:20}}>
+                            Account Setting
+                        </Text>
+                        <TouchableOpacity onPress={()=>{
+                            navigation.navigate('My Account')
+                        }} style={{flexDirection:"row",padding:30,alignItems:'center'}}>
+                            <View style={{width:'15%'}}>
+                                <Image
+                                    source={require('../../assets/icon/Profile_Icon.png')}
+                                    style={{}}
+                                />
+                            </View>
+                            <View style={{flexDirection:'column',width:'75%'}}>
+                                <Text style={{fontWeight:600,fontSize:14,color:'#181D27'}}>My Account</Text>
+                                <Text style={{fontWeight:400,fontSize:12,color:'#ABABAB'}}>Make changes to your account</Text>
+                            </View>
+                            <View style={{width:'10%'}}>
+                                <Image
+                                    source={require('../../assets/icon/Month_Chevron.png')}
+                                    style={{}}
+                                />
+                            </View>
+                        </TouchableOpacity>
+                        <View style={{alignSelf:'center',width:'85%',borderBottomWidth:1,borderBottomColor:"#D2D2D2"}} />
+                        <TouchableOpacity onPress={()=>{
+                            navigation.navigate('Change Password')
+                        }} style={{flexDirection:"row",padding:30,alignItems:'center'}}>
+                            <View style={{width:'15%'}}>
+                                <Image
+                                    source={require('../../assets/icon/change_pass.png')}
+                                    style={{}}
+                                />
+                            </View>
+                            <View style={{flexDirection:'column',width:'75%'}}>
+                                <Text style={{fontWeight:600,fontSize:14,color:'#181D27'}}>Change Password</Text>
+                                <Text style={{fontWeight:400,fontSize:12,color:'#ABABAB'}}>Change your account password</Text>
+                            </View>
+                            <View style={{width:'10%'}}>
+                                <Image
+                                    source={require('../../assets/icon/Month_Chevron.png')}
+                                    style={{}}
+                                />
+                            </View>
+                        </TouchableOpacity>
+                        <View style={{alignSelf:'center',width:'85%',borderBottomWidth:1,borderBottomColor:"#D2D2D2"}} />
+                        <TouchableOpacity 
+                            onPress={()=> {
+                                onLogout()
+                                navigation.navigate('Home');
+                            }}
+                            style={{flexDirection:"row",padding:30,alignItems:'center'}}>
+                            <View style={{width:'15%'}}>
+                                <Image
+                                    source={require('../../assets/icon/logout.png')}
+                                    style={{}}
+                                />
+                            </View>
+                            <View style={{flexDirection:'column',width:'75%'}}>
+                                <Text style={{fontWeight:600,fontSize:14,color:'#181D27'}}>Logout</Text>
+                                <Text style={{fontWeight:400,fontSize:12,color:'#ABABAB'}}>Further secure your account for safety</Text>
+                            </View>
+                            <View style={{width:'10%'}}>
+                                <Image
+                                    source={require('../../assets/icon/Month_Chevron.png')}
+                                    style={{}}
+                                />
+                            </View>
+                        </TouchableOpacity>
+                            
+                    </View>
+                </View>
+            </View>
+            <View key={"background2"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'7%',borderTopColor:'#A6A6A6B2',borderTopWidth:2, flexDirection:'row',justifyContent:'space-around',alignItems:'center'}}>
+                <Pressable>
+                    <Image
+                        source={require('../../assets/icon/home.png')}
+                        style={[styles.buttonImageIconStyle]}
+                    />
+                </Pressable>
+                <Pressable onPress={()=>{
+                    navigation.navigate('Survey', { screen: 'Survey', })
+                }}>
+                    <Image
+                        source={require('../../assets/icon/Survey_Icon.png')}
+                        style={styles.buttonImageIconStyle}
+                    />
+                </Pressable>
+                <Pressable onPress={()=>{
+                    navigation.navigate('Setting', { screen: 'Setting', })
+                }}>
+                    <Image
+                        source={require('../../assets/icon/Setting.png')}
+                        style={[styles.buttonImageIconStyle,{tintColor:iconActive}]}
+                    />
+                </Pressable>
+            </View>
+            
+        </View>
+    )
+  }
+  const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#ecf0f1',
+        padding: 10,
+      },
+    mainContainer: {
+        flex: 1,
+    },
+    title: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'center',
+        fontWeight: 'bold',
+        fontSize: 22,
+        color: 'black',
+        marginBottom: 10
+    },
+    input: {
+        height: 40,
+        borderWidth: 1,
+        padding: 10,
+        borderRadius: 50,
+        color: 'black'
+    },
+    buttonImageIconStyle: {
+        padding: 10,
+        margin: 5,
+        height: 25,
+        width: 25,
+        resizeMode: 'stretch',
+    },
+});

src/component/surveyPDAM.tsx

@@ -80,7 +80,9 @@ const img_1 = require('../../assets/img/Geonet_polos.png')
                             Inbox
                         </Text>
                     </Pressable>
-                    <Pressable>
+                    <Pressable onPress={()=> {
+                        navigation.navigate('Draft Pipa PDAM', { screen: 'Draft'})
+                    }}>
                         <Image source={require("../../assets/icon/Draft_Icon.png")} style={{}} resizeMode='contain' />
                         <Text style={{textAlign:'center',fontSize:20,color:'black',fontWeight:'400'}}>
                             Draft
@@ -105,9 +107,11 @@ const img_1 = require('../../assets/img/Geonet_polos.png')
                         style={[styles.buttonImageIconStyle]}
                     />
                 </Pressable>
-                <Pressable>
+                <Pressable onPress={()=>{
+                    navigation.navigate('Setting', { screen: 'Setting', })
+                }}>
                     <Image
-                        source={require('../../assets/icon/Profile_Icon.png')}
+                        source={require('../../assets/icon/Setting.png')}
                         style={styles.buttonImageIconStyle}
                     />
                 </Pressable>

src/component/surveyPERMIT.tsx

@@ -80,7 +80,9 @@ const img_1 = require('../../assets/img/Geonet_polos.png')
                             Inbox
                         </Text>
                     </Pressable>
-                    <Pressable>
+                    <Pressable onPress={()=> {
+                        navigation.navigate('Draft Land Permit', { screen: 'Draft'})
+                    }}>
                         <Image source={require("../../assets/icon/Draft_Icon.png")} style={{}} resizeMode='contain' />
                         <Text style={{textAlign:'center',fontSize:20,color:'black',fontWeight:'400'}}>
                             Draft
@@ -105,9 +107,11 @@ const img_1 = require('../../assets/img/Geonet_polos.png')
                         style={[styles.buttonImageIconStyle]}
                     />
                 </Pressable>
-                <Pressable>
+                <Pressable onPress={()=>{
+                    navigation.navigate('Setting', { screen: 'Setting', })
+                }}>
                     <Image
-                        source={require('../../assets/icon/Profile_Icon.png')}
+                        source={require('../../assets/icon/Setting.png')}
                         style={styles.buttonImageIconStyle}
                     />
                 </Pressable>

src/component/surveyPJU.tsx

@@ -80,7 +80,9 @@ const img_1 = require('../../assets/img/Geonet_polos.png')
                             Inbox
                         </Text>
                     </Pressable>
-                    <Pressable>
+                    <Pressable onPress={()=> {
+                        navigation.navigate('Draft Penerangan Jalan Umum', { screen: 'Draft'})
+                    }}>
                         <Image source={require("../../assets/icon/Draft_Icon.png")} style={{}} resizeMode='contain' />
                         <Text style={{textAlign:'center',fontSize:20,color:'black',fontWeight:'400'}}>
                             Draft
@@ -105,9 +107,11 @@ const img_1 = require('../../assets/img/Geonet_polos.png')
                         style={[styles.buttonImageIconStyle]}
                     />
                 </Pressable>
-                <Pressable>
+                <Pressable onPress={()=>{
+                    navigation.navigate('Setting', { screen: 'Setting', })
+                }}>
                     <Image
-                        source={require('../../assets/icon/Profile_Icon.png')}
+                        source={require('../../assets/icon/Setting.png')}
                         style={styles.buttonImageIconStyle}
                     />
                 </Pressable>

src/component/surveyPage.tsx

@@ -126,9 +126,11 @@ const img_1 = require('../../assets/img/Geonet_polos.png')
                         style={[styles.buttonImageIconStyle,{tintColor:iconActive}]}
                     />
                 </Pressable>
-                <Pressable>
+                <Pressable onPress={()=>{
+                    navigation.navigate('Setting', { screen: 'Setting', })
+                }}>
                     <Image
-                        source={require('../../assets/icon/Profile_Icon.png')}
+                        source={require('../../assets/icon/Setting.png')}
                         style={styles.buttonImageIconStyle}
                     />
                 </Pressable>