From 608e03558d1d788feef216cc3d4fbe1ea71b8a46 Mon Sep 17 00:00:00 2001
From: Mochammad Adhi Buchori <adhi.buchori@gmail.com>
Date: Sat, 19 Apr 2025 14:04:34 +0700
Subject: [PATCH] Finalized profile flow, setup status bar color, and add some
 improvement

---
 assets/images/placeholderProfileImage.png | Bin 0 -> 2011 bytes
 src/components/TextInput.tsx              |  82 +++++++++-----
 src/model/DropdownData/CityData.tsx       |   9 ++
 src/model/DropdownData/DistrictData.tsx   |   9 ++
 src/model/DropdownData/GenderData.tsx     |   6 +
 src/model/DropdownData/PostalCodeData.tsx |   9 ++
 src/model/DropdownData/ProvinceData.tsx   |   9 ++
 src/navigation/RootStack.tsx              |  12 ++
 src/navigation/type.ts                    |   2 +
 src/screens/accountVerification/index.tsx |  14 ++-
 src/screens/closeAccount/index.tsx        | 128 +++++++++++++++++++--
 src/screens/closeAccount/styles.tsx       |  95 ++++++++++++++++
 src/screens/editProfile/index.tsx         | 132 ++++++++++++++++++++--
 src/screens/editProfile/styles.tsx        |  72 ++++++++++++
 src/screens/home/index.tsx                |  14 +--
 src/screens/home/styles.tsx               |  20 ++++
 src/screens/login/index.tsx               |  27 ++++-
 src/screens/navigationRoute/index.tsx     |  61 ++++++++++
 src/screens/navigationRoute/styles.tsx    |  14 +++
 src/screens/profile/index.tsx             |  86 ++++++++++++--
 src/screens/profile/styles.tsx            |  74 ++++++++++++
 src/screens/register/index.tsx            |   8 +-
 src/screens/setPassword/index.tsx         |  67 +++++++++--
 src/screens/setPassword/styles.tsx        |  36 ++++++
 src/screens/termsAndConditions/index.tsx  |   7 +-
 25 files changed, 901 insertions(+), 92 deletions(-)
 create mode 100644 assets/images/placeholderProfileImage.png
 create mode 100644 src/model/DropdownData/CityData.tsx
 create mode 100644 src/model/DropdownData/DistrictData.tsx
 create mode 100644 src/model/DropdownData/GenderData.tsx
 create mode 100644 src/model/DropdownData/PostalCodeData.tsx
 create mode 100644 src/model/DropdownData/ProvinceData.tsx
 create mode 100644 src/screens/closeAccount/styles.tsx
 create mode 100644 src/screens/editProfile/styles.tsx
 create mode 100644 src/screens/home/styles.tsx
 create mode 100644 src/screens/navigationRoute/index.tsx
 create mode 100644 src/screens/navigationRoute/styles.tsx
 create mode 100644 src/screens/profile/styles.tsx
 create mode 100644 src/screens/setPassword/styles.tsx

diff --git a/assets/images/placeholderProfileImage.png b/assets/images/placeholderProfileImage.png
new file mode 100644
index 0000000000000000000000000000000000000000..09892098aa943af5fe95e7dd434a07fe03e7ccd1
GIT binary patch
literal 2011
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

literal 0
HcmV?d00001

diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
index f6c90b2..4dcbd76 100644
--- a/src/components/TextInput.tsx
+++ b/src/components/TextInput.tsx
@@ -8,6 +8,11 @@ import DateTimePicker from '@react-native-community/datetimepicker';
 import {useState} from 'react';
 import {Dropdown} from 'react-native-element-dropdown';
 
+type DropdownItem = {
+  label: string;
+  value: string | number;
+};
+
 interface TextInputComponentProps {
   title?: string;
   placeholder?: string;
@@ -15,13 +20,13 @@ interface TextInputComponentProps {
   isRequired?: boolean;
   isDate?: boolean;
   isDropdown?: boolean;
+  dropdownItemData?: DropdownItem[];
+  isDisabled?: boolean;
+  supportText?: string;
+  containerHeight?: any;
+  isMultiline?: boolean;
 }
 
-const genderData = [
-  {label: 'Laki-Laki', value: '1'},
-  {label: 'Perempuan', value: '2'},
-];
-
 const TextInputComponent: React.FC<TextInputComponentProps> = ({
   title,
   placeholder,
@@ -29,6 +34,11 @@ const TextInputComponent: React.FC<TextInputComponentProps> = ({
   isRequired = false,
   isDate = false,
   isDropdown = false,
+  dropdownItemData,
+  isDisabled = false,
+  supportText,
+  containerHeight,
+  isMultiline = false,
 }) => {
   const [secureText, setSecureText] = useState(isPassword);
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
@@ -36,13 +46,11 @@ const TextInputComponent: React.FC<TextInputComponentProps> = ({
   const [showPicker, setShowPicker] = useState(false);
   const [genderValue, setGenderValue] = useState(null);
 
-  const renderGenderItem = (item: any) => {
-    return (
-      <View style={styles.genderItem}>
-        <Text style={styles.genderTextItem}>{item.label}</Text>
-      </View>
-    );
-  };
+  const inputStyle = [
+    styles.containerBackground,
+    styles.placeholderText,
+    containerHeight && {height: containerHeight},
+  ];
 
   const handleDateChange = (event: any, date?: Date) => {
     if (event.type === 'dismissed') {
@@ -60,6 +68,14 @@ const TextInputComponent: React.FC<TextInputComponentProps> = ({
     }
   };
 
+  const renderDropdownItem = (item: any) => {
+    return (
+      <View style={styles.dropdownItem}>
+        <Text style={styles.dropdownTextItem}>{item.label}</Text>
+      </View>
+    );
+  };
+
   const renderInput = () => {
     if (isDropdown) {
       return (
@@ -75,17 +91,17 @@ const TextInputComponent: React.FC<TextInputComponentProps> = ({
             placeholderStyle={styles.placeholderDropdownStyle}
             selectedTextStyle={styles.selectedTextStyle}
             iconStyle={styles.iconStyle}
-            data={genderData}
+            data={dropdownItemData ?? []}
             maxHeight={300}
             labelField="label"
             valueField="value"
-            placeholder="Jenis Kelamin"
+            placeholder={placeholder}
             value={genderValue}
             onChange={item => {
               setGenderValue(item.value);
             }}
             renderRightIcon={() => <Icon name="arrow-drop-down" size={20} />}
-            renderItem={renderGenderItem}
+            renderItem={renderDropdownItem}
           />
         </View>
       );
@@ -102,7 +118,7 @@ const TextInputComponent: React.FC<TextInputComponentProps> = ({
             <TextInput
               mode="outlined"
               placeholder={placeholder}
-              style={[styles.containerBackground, styles.placeholderText]}
+              style={inputStyle}
               theme={{roundness: 12}}
               placeholderTextColor={Colors.primary60.color}
               editable={false}
@@ -134,11 +150,12 @@ const TextInputComponent: React.FC<TextInputComponentProps> = ({
         <TextInput
           mode="outlined"
           placeholder={placeholder}
-          style={[styles.containerBackground, styles.placeholderText]}
+          style={inputStyle}
           theme={{roundness: 12}}
           placeholderTextColor={Colors.primary60.color}
           activeOutlineColor={Colors.primary10.color}
           secureTextEntry={secureText}
+          disabled={isDisabled}
           right={
             isPassword ? (
               <TextInput.Icon
@@ -148,8 +165,9 @@ const TextInputComponent: React.FC<TextInputComponentProps> = ({
               />
             ) : null
           }
-          multiline={false}
+          multiline={isMultiline}
         />
+        {supportText && <Text style={[styles.supportText]}>{supportText}</Text>}
       </View>
     );
   };
@@ -179,16 +197,6 @@ const styles = StyleSheet.create({
     fontSize: 13,
     ...FontFamily.notoSansRegular,
   },
-  genderItem: {
-    padding: 16,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  genderTextItem: {
-    flex: 1,
-    fontSize: 13,
-  },
   dropdown: {
     marginTop: 8,
     backgroundColor: 'white',
@@ -212,6 +220,24 @@ const styles = StyleSheet.create({
     width: 20,
     height: 20,
   },
+  dropdownItem: {
+    padding: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  dropdownTextItem: {
+    flex: 1,
+    fontSize: 13,
+  },
+  supportText: {
+    marginTop: 8,
+    ...FontFamily.notoSansRegular,
+    fontSize: 10,
+    textAlign: 'right',
+    includeFontPadding: false,
+    color: Colors.neutral70.color,
+  },
 });
 
 export default TextInputComponent;
diff --git a/src/model/DropdownData/CityData.tsx b/src/model/DropdownData/CityData.tsx
new file mode 100644
index 0000000..1b31971
--- /dev/null
+++ b/src/model/DropdownData/CityData.tsx
@@ -0,0 +1,9 @@
+const cityData = [
+  {label: 'Jakarta Selatan', value: '1'},
+  {label: 'Bandung', value: '2'},
+  {label: 'Semarang', value: '3'},
+  {label: 'Surabaya', value: '4'},
+  {label: 'Denpasar', value: '5'},
+];
+
+export default cityData;
diff --git a/src/model/DropdownData/DistrictData.tsx b/src/model/DropdownData/DistrictData.tsx
new file mode 100644
index 0000000..9efe0b0
--- /dev/null
+++ b/src/model/DropdownData/DistrictData.tsx
@@ -0,0 +1,9 @@
+const districtData = [
+  {label: 'Setiabudi', value: '1'},
+  {label: 'Coblong', value: '2'},
+  {label: 'Candisari', value: '3'},
+  {label: 'Wonokromo', value: '4'},
+  {label: 'Denpasar Barat', value: '5'},
+];
+
+export default districtData;
diff --git a/src/model/DropdownData/GenderData.tsx b/src/model/DropdownData/GenderData.tsx
new file mode 100644
index 0000000..061a511
--- /dev/null
+++ b/src/model/DropdownData/GenderData.tsx
@@ -0,0 +1,6 @@
+const genderData = [
+  {label: 'Laki-Laki', value: '1'},
+  {label: 'Perempuan', value: '2'},
+];
+
+export default genderData;
diff --git a/src/model/DropdownData/PostalCodeData.tsx b/src/model/DropdownData/PostalCodeData.tsx
new file mode 100644
index 0000000..639615d
--- /dev/null
+++ b/src/model/DropdownData/PostalCodeData.tsx
@@ -0,0 +1,9 @@
+const postalCodeData = [
+  {label: '12920', value: '1'},
+  {label: '40131', value: '2'},
+  {label: '50256', value: '3'},
+  {label: '60243', value: '4'},
+  {label: '80119', value: '5'},
+];
+
+export default postalCodeData;
diff --git a/src/model/DropdownData/ProvinceData.tsx b/src/model/DropdownData/ProvinceData.tsx
new file mode 100644
index 0000000..3e15591
--- /dev/null
+++ b/src/model/DropdownData/ProvinceData.tsx
@@ -0,0 +1,9 @@
+const provinceData = [
+  {label: 'DKI Jakarta', value: '1'},
+  {label: 'Jawa Barat', value: '2'},
+  {label: 'Jawa Tengah', value: '3'},
+  {label: 'Jawa Timur', value: '4'},
+  {label: 'Bali', value: '5'},
+];
+
+export default provinceData;
diff --git a/src/navigation/RootStack.tsx b/src/navigation/RootStack.tsx
index fc70e13..11b65d1 100644
--- a/src/navigation/RootStack.tsx
+++ b/src/navigation/RootStack.tsx
@@ -11,6 +11,8 @@ import EditProfileScreen from '../screens/editProfile';
 import CloseAccountScreen from '../screens/closeAccount';
 import {RootStackParamList} from './type';
 import TermsAndConnditionsScreen from '../screens/termsAndConditions';
+import NavigationRouteScreen from '../screens/navigationRoute';
+import SetPasswordScreen from '../screens/setPassword';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -37,6 +39,11 @@ function RootStack() {
         component={TermsAndConnditionsScreen}
         options={{headerShown: false}}
       />
+      <Stack.Screen
+        name="NavigationRoute"
+        component={NavigationRouteScreen}
+        options={{headerShown: false}}
+      />
       <Stack.Screen
         name="Home"
         component={HomeScreen}
@@ -67,6 +74,11 @@ function RootStack() {
         component={CloseAccountScreen}
         options={{headerShown: false}}
       />
+      <Stack.Screen
+        name="SetPassword"
+        component={SetPasswordScreen}
+        options={{headerShown: false}}
+      />
     </Stack.Navigator>
   );
 }
diff --git a/src/navigation/type.ts b/src/navigation/type.ts
index 45e3b40..116b507 100644
--- a/src/navigation/type.ts
+++ b/src/navigation/type.ts
@@ -1,5 +1,6 @@
 export type RootStackParamList = {
   Login: undefined;
+  NavigationRoute: undefined;
   Home: undefined;
   Register: undefined;
   AccountVerification: undefined;
@@ -9,4 +10,5 @@ export type RootStackParamList = {
   Profile: undefined;
   EditProfile: undefined;
   CloseAccount: undefined;
+  SetPassword: undefined;
 };
diff --git a/src/screens/accountVerification/index.tsx b/src/screens/accountVerification/index.tsx
index 9f8034d..1af35f2 100644
--- a/src/screens/accountVerification/index.tsx
+++ b/src/screens/accountVerification/index.tsx
@@ -1,12 +1,20 @@
 import {useNavigation} from '@react-navigation/native';
 import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import React, {useEffect, useRef, useState} from 'react';
-import {Pressable, Text, View, TextInput, Keyboard} from 'react-native';
+import {
+  Pressable,
+  Text,
+  View,
+  TextInput,
+  Keyboard,
+  StatusBar,
+} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import {RootStackParamList} from '../../navigation/type';
 import styles from './styles';
 import {Button} from 'react-native-paper';
 import OTPTextInput from '../../components/OTPTextInput';
+import Colors from '../../../assets/styles/Colors';
 
 type AccountVerificationScreenNavigationProp = NativeStackNavigationProp<
   RootStackParamList,
@@ -50,6 +58,10 @@ function AccountVerificationScreen() {
 
   return (
     <View style={styles.container}>
+      <StatusBar
+        backgroundColor={Colors.neutral100.color}
+        barStyle="dark-content"
+      />
       <View style={styles.appBarContainer}>
         <Pressable onPress={() => navigation.goBack()}>
           <Icon name="arrow-back" size={24} style={styles.arrowBackIcon} />
diff --git a/src/screens/closeAccount/index.tsx b/src/screens/closeAccount/index.tsx
index 64828d5..3c31b90 100644
--- a/src/screens/closeAccount/index.tsx
+++ b/src/screens/closeAccount/index.tsx
@@ -1,21 +1,125 @@
-import React from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import React, {useState} from 'react';
+import {StatusBar, Text, View} from 'react-native';
+import styles from './styles';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import {RootStackParamList} from '../../navigation/type';
+import {useNavigation} from '@react-navigation/native';
+import Colors from '../../../assets/styles/Colors';
+import TextInputComponent from '../../components/TextInput';
+import {Button, Dialog, PaperProvider, Portal} from 'react-native-paper';
+
+type CloseAccountScreenNavigationProp = NativeStackNavigationProp<
+  RootStackParamList,
+  'CloseAccount'
+>;
 
 function CloseAccountScreen() {
+  const navigation = useNavigation<CloseAccountScreenNavigationProp>();
+  const closeAccountDescItems = [
+    'Jika Anda membuat akun dengan email atau nomor telepon yang sama, Anda harus melakukan daftar akun ulang.',
+    'Beberapa data terkait transaksi dapat disimpan oleh M-Paspor berdasarkan ketentuan peraturan perundang-undangan.',
+  ];
+  const [visible, setVisible] = useState(false);
+
+  const showDialog = () => setVisible(true);
+  const hideDialog = () => setVisible(false);
+
+  const handleCloseAccount = () => {
+    navigation.reset({
+      index: 0,
+      routes: [{name: 'Login'}],
+    });
+  };
+
   return (
     <View style={styles.container}>
-      <Text>Close Screen</Text>
+      <PaperProvider>
+        <View style={styles.contentContainer}>
+          <StatusBar
+            backgroundColor={visible ? '#ADADAF' : Colors.neutral100.color}
+            barStyle={visible ? 'light-content' : 'dark-content'}
+          />
+
+          <View>
+            <View style={styles.appBarContainer}>
+              <Icon
+                name="arrow-left"
+                size={24}
+                style={styles.appBarIcon}
+                color={Colors.secondary30.color}
+                onPress={() => navigation.goBack()}
+              />
+              <Text style={styles.appBarTitle}>Tutup Akun</Text>
+            </View>
+
+            <View style={styles.closeAccountInfoContainer}>
+              <Text style={styles.closeAccountTitle}>
+                Hal yang terjadi setelah tutup akun
+              </Text>
+              <View>
+                {closeAccountDescItems.map((item, index) => (
+                  <View key={index} style={styles.closeAccountDescContainer}>
+                    <Text style={styles.closeAccountNumber}>{index + 1}.</Text>
+                    <Text style={styles.closeAccountDesc}>{item}</Text>
+                  </View>
+                ))}
+              </View>
+            </View>
+            <View style={styles.closeAccountReasonContainer}>
+              <TextInputComponent
+                title="Kenapa Anda ingin tutup akun?"
+                placeholder="Tuliskan alasan Anda menutup akun"
+                isRequired
+                supportText="0/100 karakter"
+                containerHeight={90}
+                isMultiline
+              />
+            </View>
+          </View>
+          <View style={styles.closeAccountButtonContainer}>
+            <Button
+              mode="contained"
+              style={styles.buttonContinue}
+              textColor={Colors.neutral100.color}
+              onPress={showDialog}>
+              Lanjut
+            </Button>
+            <Button
+              mode="outlined"
+              textColor={Colors.primary30.color}
+              style={styles.butttonBack}
+              onPress={() => navigation.goBack()}>
+              Kembali
+            </Button>
+          </View>
+        </View>
+        <Portal>
+          <Dialog visible={visible} style={styles.dialogContainer}>
+            <Dialog.Title style={styles.dialogTitle}>
+              Apakah Anda yakin akan menutup akun?
+            </Dialog.Title>
+            <View style={styles.dialogButtonContainer}>
+              <Button
+                style={styles.buttonApproveCloseAccount}
+                mode="contained"
+                textColor={Colors.neutral100.color}
+                onPress={handleCloseAccount}>
+                Ya, lanjut tutup akun
+              </Button>
+              <Button
+                style={styles.buttonCancelCloseAccount}
+                mode="outlined"
+                textColor={Colors.indicatorRed.color}
+                onPress={hideDialog}>
+                Tidak, jangan tutup akun
+              </Button>
+            </View>
+          </Dialog>
+        </Portal>
+      </PaperProvider>
     </View>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'white',
-  },
-});
-
 export default CloseAccountScreen;
diff --git a/src/screens/closeAccount/styles.tsx b/src/screens/closeAccount/styles.tsx
new file mode 100644
index 0000000..fd27e8b
--- /dev/null
+++ b/src/screens/closeAccount/styles.tsx
@@ -0,0 +1,95 @@
+import {StyleSheet} from 'react-native';
+import Colors from '../../../assets/styles/Colors';
+import FontFamily from '../../../assets/styles/FontFamily';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  appBarTitle: {
+    color: Colors.secondary30.color,
+    ...FontFamily.notoSansRegular,
+    fontSize: 22,
+    marginStart: 16,
+  },
+  appBarIcon: {
+    marginLeft: 16,
+  },
+  appBarContainer: {
+    height: 64,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  closeAccountInfoContainer: {
+    marginVertical: 16,
+    marginHorizontal: 16,
+  },
+  closeAccountTitle: {
+    fontSize: 16,
+    ...FontFamily.notoSansExtraBold,
+    color: Colors.secondary30.color,
+    marginBottom: 16,
+  },
+  closeAccountDescContainer: {
+    flexDirection: 'row',
+    gap: 6,
+    marginBottom: 16,
+  },
+  closeAccountNumber: {
+    ...FontFamily.notoSansRegular,
+    fontSize: 12,
+  },
+  closeAccountDesc: {
+    flex: 1,
+    ...FontFamily.notoSansRegular,
+    textAlign: 'justify',
+    fontSize: 12,
+  },
+  closeAccountReasonContainer: {
+    borderWidth: 1,
+    borderColor: Colors.secondary50.color,
+    padding: 12,
+    margin: 16,
+    borderRadius: 8,
+    height: 170,
+  },
+  closeAccountButtonContainer: {
+    gap: 16,
+    marginHorizontal: 16,
+    marginBottom: 48,
+  },
+  butttonBack: {
+    borderColor: Colors.primary30.color,
+  },
+  buttonContinue: {
+    backgroundColor: Colors.primary30.color,
+  },
+  dialogContainer: {
+    backgroundColor: 'white',
+    elevation: 0,
+    shadowColor: 'transparent',
+    borderRadius: 20,
+  },
+  dialogTitle: {
+    color: Colors.indicatorRed.color,
+  },
+  dialogButtonContainer: {
+    marginHorizontal: 24,
+    marginBottom: 24,
+    marginTop: 16,
+    gap: 16,
+  },
+  buttonApproveCloseAccount: {
+    backgroundColor: Colors.indicatorRed.color,
+  },
+  buttonCancelCloseAccount: {
+    borderColor: Colors.indicatorRed.color,
+  },
+});
+
+export default styles;
diff --git a/src/screens/editProfile/index.tsx b/src/screens/editProfile/index.tsx
index c855ca6..d83b503 100644
--- a/src/screens/editProfile/index.tsx
+++ b/src/screens/editProfile/index.tsx
@@ -1,21 +1,131 @@
 import React from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import {Image, ScrollView, StatusBar, Text, View} from 'react-native';
+import styles from './styles';
+import Colors from '../../../assets/styles/Colors';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {RootStackParamList} from '../../navigation/type';
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import {useNavigation} from '@react-navigation/native';
+import TextInputComponent from '../../components/TextInput';
+import genderData from '../../model/DropdownData/GenderData';
+import provinceData from '../../model/DropdownData/ProvinceData';
+import cityData from '../../model/DropdownData/CityData';
+import districtData from '../../model/DropdownData/DistrictData';
+import postalCodeData from '../../model/DropdownData/PostalCodeData';
+import {Button} from 'react-native-paper';
+
+type EditProfileScreenNavigationProp = NativeStackNavigationProp<
+  RootStackParamList,
+  'EditProfile'
+>;
 
 function EditProfileScreen() {
+  const placeholderProfileImage = require('../../../assets/images/placeholderProfileImage.png');
+  const navigation = useNavigation<EditProfileScreenNavigationProp>();
+
   return (
     <View style={styles.container}>
-      <Text>Edit Screen</Text>
+      <StatusBar
+        backgroundColor={Colors.secondary30.color}
+        barStyle="light-content"
+      />
+      <View style={styles.appBarContainer}>
+        <Icon
+          name="arrow-left"
+          size={24}
+          style={styles.appBarIcon}
+          color={Colors.neutral100.color}
+          onPress={() => navigation.goBack()}
+        />
+        <Text style={styles.appBarTitle}>Edit Profil</Text>
+      </View>
+      <ScrollView>
+        <View style={styles.topContainer}>
+          <Image source={placeholderProfileImage} style={styles.profileImage} />
+          <View style={styles.editProfileImageIconContainer}>
+            <Icon
+              name="pencil-outline"
+              size={18}
+              color={Colors.neutral100.color}
+            />
+          </View>
+        </View>
+        <View style={styles.editProfileSectionFieldContainer}>
+          <TextInputComponent
+            title="Nama Lengkap"
+            placeholder="Masukkan Nama Lengkap Anda"
+          />
+          <TextInputComponent title="NIK" placeholder="Masukkan NIK Anda" />
+          <View style={styles.textInputRowContainer}>
+            <View style={styles.textInputFlex}>
+              <TextInputComponent
+                title="Tanggal Lahir"
+                placeholder="DD/MM/YYYY"
+                isDate
+              />
+            </View>
+            <View style={styles.textInputFlex}>
+              <TextInputComponent
+                title="Jenis Kelamin"
+                placeholder="Jenis Kelamin"
+                isDropdown
+                dropdownItemData={genderData}
+              />
+            </View>
+          </View>
+          <TextInputComponent
+            title="Email"
+            placeholder="salwaadhani@gmail.com"
+            isDisabled
+          />
+          <TextInputComponent
+            title="Alamat Rumah"
+            placeholder="Masukkan Alamat Rumah Anda"
+            supportText="0/100 karakter"
+          />
+          <TextInputComponent
+            title="Provinsi Sesuai KTP"
+            placeholder="Provinsi"
+            isDropdown
+            dropdownItemData={provinceData}
+          />
+          <TextInputComponent
+            title="Kabupaten/Kota Sesuai KTP"
+            placeholder="Kabupaten/Kota"
+            isDropdown
+            dropdownItemData={cityData}
+          />
+          <TextInputComponent
+            title="Kecamatan Sesuai KTP"
+            placeholder="Kecamatan"
+            isDropdown
+            dropdownItemData={districtData}
+          />
+          <TextInputComponent
+            title="Kode Pos Sesuai KTP"
+            placeholder="Kode Pos"
+            isDropdown
+            dropdownItemData={postalCodeData}
+          />
+        </View>
+        <View style={styles.editProfileButtonContainer}>
+          <Button
+            mode="contained"
+            style={styles.editProfileButton}
+            onPress={() => navigation.goBack()}>
+            Simpan Perubahan
+          </Button>
+          <Button
+            mode="outlined"
+            textColor={Colors.indicatorRed.color}
+            style={styles.closeAccountButton}
+            onPress={() => navigation.navigate('CloseAccount')}>
+            Tutup Akun
+          </Button>
+        </View>
+      </ScrollView>
     </View>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'white',
-  },
-});
-
 export default EditProfileScreen;
diff --git a/src/screens/editProfile/styles.tsx b/src/screens/editProfile/styles.tsx
new file mode 100644
index 0000000..3128b92
--- /dev/null
+++ b/src/screens/editProfile/styles.tsx
@@ -0,0 +1,72 @@
+import {StyleSheet} from 'react-native';
+import FontFamily from '../../../assets/styles/FontFamily';
+import Colors from '../../../assets/styles/Colors';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  appBarTitle: {
+    color: Colors.neutral100.color,
+    ...FontFamily.notoSansRegular,
+    fontSize: 22,
+    marginStart: 16,
+  },
+  appBarIcon: {
+    marginLeft: 16,
+  },
+  appBarContainer: {
+    height: 64,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.secondary30.color,
+  },
+  topContainer: {
+    backgroundColor: Colors.secondary30.color,
+    height: 85,
+    alignItems: 'center',
+  },
+  profileImage: {
+    height: 125,
+    width: 100,
+    borderRadius: 8,
+    marginTop: 16,
+    position: 'absolute',
+  },
+  editProfileImageIconContainer: {
+    backgroundColor: Colors.primary30.color,
+    padding: 10,
+    borderRadius: 100,
+    position: 'absolute',
+    bottom: -50,
+    right: 125,
+  },
+  editProfileSectionFieldContainer: {
+    gap: 16,
+    marginTop: 72,
+    marginBottom: 32,
+    marginHorizontal: 16,
+  },
+  textInputRowContainer: {
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: 12,
+  },
+  textInputFlex: {
+    flex: 1,
+  },
+  editProfileButtonContainer: {
+    gap: 16,
+    marginHorizontal: 16,
+    marginBottom: 48,
+  },
+  editProfileButton: {
+    backgroundColor: Colors.primary30.color,
+  },
+  closeAccountButton: {
+    borderColor: Colors.indicatorRed.color,
+  },
+});
+
+export default styles;
diff --git a/src/screens/home/index.tsx b/src/screens/home/index.tsx
index 9d8bf09..901ebcd 100644
--- a/src/screens/home/index.tsx
+++ b/src/screens/home/index.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import * as React from 'react';
+import styles from './styles';
+import {View, Text} from 'react-native';
 
 function HomeScreen() {
   return (
@@ -9,13 +10,4 @@ function HomeScreen() {
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'white',
-  },
-});
-
 export default HomeScreen;
diff --git a/src/screens/home/styles.tsx b/src/screens/home/styles.tsx
new file mode 100644
index 0000000..efc4e0a
--- /dev/null
+++ b/src/screens/home/styles.tsx
@@ -0,0 +1,20 @@
+import {StyleSheet} from 'react-native';
+import Colors from '../../../assets/styles/Colors';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'white',
+  },
+  bottomNavLabel: {
+    color: Colors.neutral100.color,
+    textAlign: 'center',
+    alignSelf: 'center',
+    fontSize: 12,
+    position: 'absolute',
+  },
+});
+
+export default styles;
diff --git a/src/screens/login/index.tsx b/src/screens/login/index.tsx
index df24b59..e635039 100644
--- a/src/screens/login/index.tsx
+++ b/src/screens/login/index.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import {Image, Pressable, ScrollView, Text, View} from 'react-native';
+import {
+  Image,
+  Pressable,
+  ScrollView,
+  StatusBar,
+  Text,
+  View,
+} from 'react-native';
 import styles from './styles';
 import {Button} from 'react-native-paper';
 import TextInputComponent from '../../components/TextInput';
@@ -7,6 +14,7 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import {useNavigation} from '@react-navigation/native';
 import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import {RootStackParamList} from '../../navigation/type';
+import Colors from '../../../assets/styles/Colors';
 
 type LoginScreenNavigationProp = NativeStackNavigationProp<
   RootStackParamList,
@@ -19,6 +27,10 @@ function LoginScreen() {
 
   return (
     <ScrollView style={styles.container}>
+      <StatusBar
+        backgroundColor={Colors.secondary60.color}
+        barStyle="light-content"
+      />
       <Image source={welcomeImage} style={styles.welcomeImage} />
       <View style={styles.contentContainer}>
         <Text style={styles.welcomeText}>
@@ -27,16 +39,21 @@ function LoginScreen() {
         <View style={styles.textInputContainer}>
           <TextInputComponent title="Email" placeholder="Masukkan Email" />
           <TextInputComponent
-            title="Password"
-            placeholder="Masukkan Password"
-            isPassword={true}
+            title="Kata Sandi"
+            placeholder="Masukkan Kata Sandi"
+            isPassword
           />
         </View>
         <Text style={styles.forgotPasswordText}>Lupa kata sandi?</Text>
         <Button
           style={styles.loginButton}
           mode="contained"
-          onPress={() => navigation.navigate('Home')}>
+          onPress={() =>
+            navigation.reset({
+              index: 0,
+              routes: [{name: 'NavigationRoute'}],
+            })
+          }>
           Masuk
         </Button>
         <View style={styles.registerAccountContainer}>
diff --git a/src/screens/navigationRoute/index.tsx b/src/screens/navigationRoute/index.tsx
new file mode 100644
index 0000000..c2a0495
--- /dev/null
+++ b/src/screens/navigationRoute/index.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import {BottomNavigation, Text} from 'react-native-paper';
+import Colors from '../../../assets/styles/Colors';
+import ProfileScreen from '../profile';
+import styles from './styles';
+import HomeScreen from '../home';
+import HistoryScreen from '../history';
+
+const HomeRoute = () => <HomeScreen />;
+const HistoryRoute = () => <HistoryScreen />;
+const ProfileRoute = () => <ProfileScreen />;
+
+function NavigationRouteScreen() {
+  const [index, setIndex] = React.useState(0);
+  const [routes] = React.useState([
+    {
+      key: 'home',
+      title: 'Home',
+      focusedIcon: 'home',
+      unfocusedIcon: 'home-outline',
+    },
+    {
+      key: 'history',
+      title: 'History',
+      focusedIcon: 'history',
+    },
+    {
+      key: 'profile',
+      title: 'Profile',
+      focusedIcon: 'account-circle',
+      unfocusedIcon: 'account-circle-outline',
+    },
+  ]);
+
+  const renderScene = BottomNavigation.SceneMap({
+    home: HomeRoute,
+    history: HistoryRoute,
+    profile: ProfileRoute,
+  });
+
+  return (
+    <BottomNavigation
+      navigationState={{index, routes}}
+      onIndexChange={setIndex}
+      renderScene={renderScene}
+      activeColor={Colors.primary30.color}
+      inactiveColor={Colors.neutral100.color}
+      barStyle={{backgroundColor: Colors.primary30.color}}
+      theme={{
+        colors: {
+          secondaryContainer: Colors.neutral100.color,
+        },
+      }}
+      renderLabel={({route}) => (
+        <Text style={styles.bottomNavLabel}>{route.title}</Text>
+      )}
+    />
+  );
+}
+
+export default NavigationRouteScreen;
diff --git a/src/screens/navigationRoute/styles.tsx b/src/screens/navigationRoute/styles.tsx
new file mode 100644
index 0000000..96c6ca3
--- /dev/null
+++ b/src/screens/navigationRoute/styles.tsx
@@ -0,0 +1,14 @@
+import {StyleSheet} from 'react-native';
+import Colors from '../../../assets/styles/Colors';
+
+const styles = StyleSheet.create({
+  bottomNavLabel: {
+    color: Colors.neutral100.color,
+    textAlign: 'center',
+    alignSelf: 'center',
+    fontSize: 12,
+    position: 'absolute',
+  },
+});
+
+export default styles;
diff --git a/src/screens/profile/index.tsx b/src/screens/profile/index.tsx
index e239af7..74675f1 100644
--- a/src/screens/profile/index.tsx
+++ b/src/screens/profile/index.tsx
@@ -1,21 +1,85 @@
 import React from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import {Image, StatusBar, Text, View} from 'react-native';
+import styles from './styles';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import Colors from '../../../assets/styles/Colors';
+import {Button} from 'react-native-paper';
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import {RootStackParamList} from '../../navigation/type';
+import {useNavigation} from '@react-navigation/native';
+
+type ProfileScreenNavigationProp = NativeStackNavigationProp<
+  RootStackParamList,
+  'Profile'
+>;
 
 function ProfileScreen() {
+  const placeholderProfileImage = require('../../../assets/images/placeholderProfileImage.png');
+  const navigation = useNavigation<ProfileScreenNavigationProp>();
   return (
     <View style={styles.container}>
-      <Text>Profile Screen</Text>
+      <StatusBar
+        backgroundColor={Colors.secondary30.color}
+        barStyle="light-content"
+      />
+      <View style={styles.appBarContainer}>
+        <Text style={styles.appBarTitle}>Profil</Text>
+      </View>
+      <View style={styles.topContainer}>
+        <Image source={placeholderProfileImage} style={styles.profileImage} />
+        <Text style={styles.accountName}>Salwa Aisyah Adhani</Text>
+        <Text style={styles.accountNumber}>3271234560009123456</Text>
+      </View>
+      <View style={styles.sectionProfileField}>
+        <Icon name="email-outline" size={20} color={Colors.secondary30.color} />
+        <Text style={styles.sectionProfileText}>salwaadhani@gmail.com</Text>
+      </View>
+      <View style={styles.sectionProfileField}>
+        <Icon name="phone-outline" size={20} color={Colors.secondary30.color} />
+        <Text style={styles.sectionProfileText}>085123456789</Text>
+      </View>
+      <View style={styles.sectionProfileField}>
+        <Icon
+          name="calendar-month"
+          size={20}
+          color={Colors.secondary30.color}
+        />
+        <Text style={styles.sectionProfileText}>22 Februari 2002</Text>
+      </View>
+      <View style={styles.sectionProfileField}>
+        <Icon name="home-outline" size={20} color={Colors.secondary30.color} />
+        <Text style={styles.sectionProfileText}>Jl. Raya Muchtar</Text>
+      </View>
+      <View style={styles.sectionButtonContainer}>
+        <Button
+          icon="pencil-outline"
+          mode="contained"
+          style={styles.sectionButtonStyle}
+          onPress={() => navigation.navigate('EditProfile')}>
+          Edit Profil
+        </Button>
+        <Button
+          icon="lock-outline"
+          mode="contained"
+          style={styles.sectionButtonStyle}
+          onPress={() => navigation.navigate('SetPassword')}>
+          Atur Kata Sandi
+        </Button>
+      </View>
+      <Button
+        mode="outlined"
+        textColor={Colors.indicatorRed.color}
+        style={styles.logoutButton}
+        onPress={() =>
+          navigation.reset({
+            index: 0,
+            routes: [{name: 'Login'}],
+          })
+        }>
+        Keluar
+      </Button>
     </View>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'white',
-  },
-});
-
 export default ProfileScreen;
diff --git a/src/screens/profile/styles.tsx b/src/screens/profile/styles.tsx
new file mode 100644
index 0000000..545260f
--- /dev/null
+++ b/src/screens/profile/styles.tsx
@@ -0,0 +1,74 @@
+import {StyleSheet} from 'react-native';
+import Colors from '../../../assets/styles/Colors';
+import FontFamily from '../../../assets/styles/FontFamily';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  topContainer: {
+    width: '100%',
+    backgroundColor: Colors.secondary30.color,
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  appBarTitle: {
+    color: Colors.neutral100.color,
+    ...FontFamily.notoSansExtraBold,
+    fontSize: 28,
+    marginStart: 16,
+    marginVertical: 14,
+  },
+  appBarContainer: {
+    height: 64,
+    backgroundColor: Colors.secondary30.color,
+    justifyContent: 'center',
+  },
+  profileImage: {
+    height: 125,
+    width: 100,
+    borderRadius: 8,
+    marginTop: 16,
+  },
+  accountName: {
+    marginTop: 16,
+    ...FontFamily.notoSansBold,
+    fontSize: 18,
+    color: Colors.neutral100.color,
+  },
+  accountNumber: {
+    ...FontFamily.notoSansRegular,
+    fontSize: 14,
+    color: Colors.neutral100.color,
+    marginBottom: 16,
+  },
+  sectionProfileField: {
+    flexDirection: 'row',
+    gap: 16,
+    marginHorizontal: 16,
+    paddingVertical: 12,
+  },
+  sectionProfileText: {
+    ...FontFamily.notoSansRegular,
+    fontSize: 12,
+  },
+  sectionButtonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 16,
+    marginHorizontal: 16,
+    marginTop: 32,
+  },
+  sectionButtonStyle: {
+    flex: 1,
+    backgroundColor: Colors.primary30.color,
+  },
+  logoutButton: {
+    marginTop: 16,
+    marginHorizontal: 16,
+    borderColor: Colors.indicatorRed.color,
+  },
+});
+
+export default styles;
diff --git a/src/screens/register/index.tsx b/src/screens/register/index.tsx
index a39a492..0758650 100644
--- a/src/screens/register/index.tsx
+++ b/src/screens/register/index.tsx
@@ -1,6 +1,6 @@
 import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import React, {useState} from 'react';
-import {Pressable, ScrollView, Text, View} from 'react-native';
+import {Pressable, ScrollView, StatusBar, Text, View} from 'react-native';
 import {RootStackParamList} from '../../navigation/type';
 import {CommonActions, useNavigation} from '@react-navigation/native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
@@ -8,6 +8,7 @@ import styles from './styles';
 import TextInputComponent from '../../components/TextInput';
 import {Button, Checkbox} from 'react-native-paper';
 import Colors from '../../../assets/styles/Colors';
+import genderData from '../../model/DropdownData/GenderData';
 
 type RegisterScreenNavigationProp = NativeStackNavigationProp<
   RootStackParamList,
@@ -20,6 +21,10 @@ function RegisterScreen() {
 
   return (
     <View style={styles.container}>
+      <StatusBar
+        backgroundColor={Colors.neutral100.color}
+        barStyle="dark-content"
+      />
       <View style={styles.appBarContainer}>
         <Pressable onPress={() => navigation.goBack()}>
           <Icon name="arrow-back" size={24} style={styles.arrowBackIcon} />
@@ -55,6 +60,7 @@ function RegisterScreen() {
                 placeholder="Jenis Kelamin"
                 isRequired
                 isDropdown
+                dropdownItemData={genderData}
               />
             </View>
           </View>
diff --git a/src/screens/setPassword/index.tsx b/src/screens/setPassword/index.tsx
index f21ff8e..61d66d7 100644
--- a/src/screens/setPassword/index.tsx
+++ b/src/screens/setPassword/index.tsx
@@ -1,21 +1,66 @@
 import React from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import {StatusBar, Text, View} from 'react-native';
+import styles from './styles';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import TextInputComponent from '../../components/TextInput';
+import Colors from '../../../assets/styles/Colors';
+import {Button} from 'react-native-paper';
+import {useNavigation} from '@react-navigation/native';
+import {RootStackParamList} from '../../navigation/type';
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
+
+type SetPasswordScreenNavigationProp = NativeStackNavigationProp<
+  RootStackParamList,
+  'SetPassword'
+>;
 
 function SetPasswordScreen() {
+  const navigation = useNavigation<SetPasswordScreenNavigationProp>();
+
   return (
     <View style={styles.container}>
-      <Text>Set Password Screen</Text>
+      <StatusBar
+        backgroundColor={Colors.neutral100.color}
+        barStyle="dark-content"
+      />
+      <View style={styles.appBarContainer}>
+        <Icon
+          name="arrow-left"
+          size={24}
+          style={styles.appBarIcon}
+          color={Colors.secondary30.color}
+          onPress={() => navigation.goBack()}
+        />
+        <Text style={styles.appBarTitle}>Atur Kata Sandi</Text>
+      </View>
+      <View style={styles.setPasswordSectionFieldContainer}>
+        <TextInputComponent
+          title="Kata Sandi Lama"
+          placeholder="Masukkan kata sandi lama"
+          isPassword
+          isRequired
+        />
+        <TextInputComponent
+          title="Kata Sandi Baru"
+          placeholder="Masukkan kata sandi baru"
+          isPassword
+          isRequired
+        />
+        <TextInputComponent
+          title="Ulang Kata Sandi Baru"
+          placeholder="Masukkan ulang kata sandi baru"
+          isPassword
+          isRequired
+        />
+      </View>
+      <Button
+        mode="contained"
+        style={styles.buttonSetPassword}
+        onPress={() => {}}>
+        Simpan Perubahan
+      </Button>
     </View>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'white',
-  },
-});
-
 export default SetPasswordScreen;
diff --git a/src/screens/setPassword/styles.tsx b/src/screens/setPassword/styles.tsx
new file mode 100644
index 0000000..bac103c
--- /dev/null
+++ b/src/screens/setPassword/styles.tsx
@@ -0,0 +1,36 @@
+import {StyleSheet} from 'react-native';
+import FontFamily from '../../../assets/styles/FontFamily';
+import Colors from '../../../assets/styles/Colors';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  appBarTitle: {
+    color: Colors.secondary30.color,
+    ...FontFamily.notoSansRegular,
+    fontSize: 22,
+    marginStart: 16,
+  },
+  appBarIcon: {
+    marginLeft: 16,
+  },
+  appBarContainer: {
+    height: 64,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  setPasswordSectionFieldContainer: {
+    gap: 16,
+    marginTop: 16,
+    marginBottom: 32,
+    marginHorizontal: 16,
+  },
+  buttonSetPassword: {
+    marginHorizontal: 16,
+    backgroundColor: Colors.primary30.color,
+  },
+});
+
+export default styles;
diff --git a/src/screens/termsAndConditions/index.tsx b/src/screens/termsAndConditions/index.tsx
index d32bd6b..0773683 100644
--- a/src/screens/termsAndConditions/index.tsx
+++ b/src/screens/termsAndConditions/index.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import {Pressable, ScrollView, Text, View} from 'react-native';
+import {Pressable, ScrollView, StatusBar, Text, View} from 'react-native';
 import styles from './styles';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import {RootStackParamList} from '../../navigation/type';
 import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import {useNavigation} from '@react-navigation/native';
+import Colors from '../../../assets/styles/Colors';
 
 type TermsAndConditionsScreenNavigationProp = NativeStackNavigationProp<
   RootStackParamList,
@@ -16,6 +17,10 @@ function TermsAndConnditionsScreen() {
 
   return (
     <View style={styles.container}>
+      <StatusBar
+        backgroundColor={Colors.neutral100.color}
+        barStyle="dark-content"
+      />
       <View style={styles.appBarContainer}>
         <Pressable onPress={() => navigation.goBack()}>
           <Icon name="arrow-back" size={24} style={styles.arrowBackIcon} />