Finalized Applicant Detail screen and update AppBar on Home, History, and Profile screens

package-lock.json

@@ -10636,6 +10636,7 @@
       "version": "15.11.2",
       "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.11.2.tgz",
       "integrity": "sha512-+YfF72IbWQUKzCIydlijV1fLuBsQNGMT6Da2kFlo1sh+LE3BIm/2Q7AR1zAAR6L0BFLi1WaQPLfFUC9bNZpOmw==",
+      "license": "MIT",
       "dependencies": {
         "css-select": "^5.1.0",
         "css-tree": "^1.1.3",

src/data/History/PassportAppointmentData.tsx

@@ -13,7 +13,7 @@ const passportAppointmentData = [
       nationalIdNumber: '3271234560009120001',
       gender: 'Wanita',
       applicationType: 'Baru',
-      replacementReason: '',
+      replacementReason: 'Sekolah di Luar Negeri',
       applicationPurpose: 'Ibadah Umrah',
       passportType: 'PASPOR BIASA NON ELEKTRONIK',
       fee: '350.000',
@@ -53,7 +53,7 @@ const passportAppointmentData = [
       nationalIdNumber: '3271234560009120003',
       gender: 'Wanita',
       applicationType: 'Baru',
-      replacementReason: '',
+      replacementReason: 'Sekolah di Luar Negeri',
       applicationPurpose: 'Wisata/Liburan',
       passportType: 'PASPOR BIASA NON ELEKTRONIK',
       fee: '350.000',
@@ -113,7 +113,7 @@ const passportAppointmentData = [
       nationalIdNumber: '3271234560009120006',
       gender: 'Pria',
       applicationType: 'Baru',
-      replacementReason: '',
+      replacementReason: 'Hilang',
       applicationPurpose: 'Tugas Kantor',
       passportType: 'PASPOR BIASA NON ELEKTRONIK',
       fee: '350.000',

src/screens/applicationDetail/index.tsx

@@ -7,13 +7,132 @@ import Colors from '../../../assets/styles/Colors';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import {RootStackParamList} from '../../navigation/type';
-import {Divider} from 'react-native-paper';
+import {Button, Divider} from 'react-native-paper';
 
 type ApplicationDetailScreenNavigationProp = NativeStackNavigationProp<
   RootStackParamList,
   'ApplicationDetail'
 >;
 
+const renderApplicantDetailContent = () => {
+  const route = useRoute();
+  const {data} = route.params as {data: PassportAppointmentData};
+
+  return (
+    <View style={styles.applicantDetailContentContainer}>
+      <View style={styles.applicantDetailTextContentWrapper}>
+        <Text style={styles.applicantDetailTextTitle}>Pemohon</Text>
+        <Text
+          style={[
+            styles.applicantDetailTextDesc,
+            {textTransform: 'uppercase', textAlign: 'right'},
+          ]}>
+          {data.applicantName}
+        </Text>
+      </View>
+      <View style={styles.applicantDetailTextContentWrapper}>
+        <Text style={styles.applicantDetailTextTitle}>Kode Permohonan</Text>
+        <Text style={[styles.applicantDetailTextDesc, {textAlign: 'right'}]}>
+          {data.applicantCode}
+        </Text>
+      </View>
+      <View style={styles.applicantDetailContentChildContainer}>
+        <View style={styles.applicantDetailTextContentWrapper}>
+          <Text style={styles.applicantDetailTextTitle}>NIK</Text>
+          <Text style={styles.applicantDetailTextDesc}>
+            {data.applicationDetails.nationalIdNumber}
+          </Text>
+        </View>
+        <View style={styles.applicantDetailTextContentWrapper}>
+          <Text style={styles.applicantDetailTextTitle}>Jenis Kelamin</Text>
+          <Text style={styles.applicantDetailTextDesc}>
+            {data.applicationDetails.gender}
+          </Text>
+        </View>
+        <View style={styles.applicantDetailTextContentWrapper}>
+          <Text style={styles.applicantDetailTextTitle}>Jenis Permohonan</Text>
+          <Text style={styles.applicantDetailTextDesc}>
+            {data.applicationDetails.applicationType}
+          </Text>
+        </View>
+        <View style={styles.applicantDetailTextContentWrapper}>
+          <Text style={styles.applicantDetailTextTitle}>
+            Alasan Penggantian
+          </Text>
+          <Text style={styles.applicantDetailTextDesc}>
+            {data.applicationDetails.replacementReason}
+          </Text>
+        </View>
+        <View style={styles.applicantDetailTextContentWrapper}>
+          <Text style={styles.applicantDetailTextTitle}>Tujuan Permohonan</Text>
+          <Text style={styles.applicantDetailTextDesc}>
+            {data.applicationDetails.applicationPurpose}
+          </Text>
+        </View>
+        <View style={styles.applicantDetailTextContentWrapper}>
+          <Text style={styles.applicantDetailTextTitle}>Jenis Paspor</Text>
+          <Text style={styles.applicantDetailTextDesc}>
+            {data.applicationDetails.applicationType}
+          </Text>
+        </View>
+      </View>
+      <Divider />
+      {data.status === 'Sudah Terbayar' ? (
+        <>
+          <View style={styles.applicantDetailBottomContentWrapper}>
+            <Text style={styles.applicantDetailBottomText}>Biaya</Text>
+            <View style={styles.applicantDetailFeeContentWrapper}>
+              <Text style={styles.applicantDetailBottomText}>
+                {data.applicationDetails.fee}
+              </Text>
+              <Icon
+                name="check-circle"
+                size={18}
+                color={Colors.indicatorGreen.color}
+              />
+            </View>
+          </View>
+          <Button
+            mode="contained"
+            style={styles.applicantDetailContentChildButton}
+            onPress={() => {}}>
+            Lanjut Pembayaran
+          </Button>
+        </>
+      ) : data.status === 'Permohonan Kadaluarsa' ? (
+        <View style={styles.applicantDetailBottomContentWrapper}>
+          <Text style={styles.applicantDetailBottomText}>Biaya</Text>
+          <Text style={styles.applicantDetailBottomText}>
+            {data.applicationDetails.fee}
+          </Text>
+        </View>
+      ) : (
+        <>
+          <View style={styles.applicantDetailBottomContentWrapper}>
+            <Text style={styles.applicantDetailBottomText}>Biaya</Text>
+            <View style={styles.applicantDetailFeeContentWrapper}>
+              <Text style={styles.applicantDetailBottomText}>
+                {data.applicationDetails.fee}
+              </Text>
+              <Icon
+                name="clock"
+                size={18}
+                color={Colors.indicatorOrange.color}
+              />
+            </View>
+          </View>
+          <Button
+            mode="contained"
+            style={styles.applicantDetailContentChildButton}
+            onPress={() => {}}>
+            Lihat Persyaratan
+          </Button>
+        </>
+      )}
+    </View>
+  );
+};
+
 const renderStatusContent = (status: string) => {
   const statusConfig: {
     [key: string]: {
@@ -128,7 +247,20 @@ function ApplicationDetailScreen() {
             </View>
           </View>
           <Divider />
+          <View style={styles.midTextContentContainer}>
+            <View style={styles.midTextContentWrapper}>
+              <Text style={styles.midTextContentTitle}>Tanggal Pengajuan</Text>
+              <Text style={styles.midTextContentData}>
+                {data.submissionDate}
+              </Text>
+            </View>
+            <View style={styles.midTextContentWrapper}>
+              <Text style={styles.midTextContentTitle}>Kode Layanan</Text>
+              <Text style={styles.midTextContentData}>{data.serviceCode}</Text>
+            </View>
+          </View>
         </View>
+        <View>{renderApplicantDetailContent()}</View>
       </ScrollView>
     </View>
   );

src/screens/applicationDetail/styles.tsx

@@ -31,7 +31,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 12,
     paddingVertical: 16,
-    paddingHorizontal: 24,
+    paddingHorizontal: 16,
     borderRadius: 8,
   },
   statusContentContainer: {
@@ -60,12 +60,12 @@ const styles = StyleSheet.create({
   midTextTitle: {
     ...FontFamily.notoSansExtraBold,
     fontSize: 18,
-    marginVertical: 12,
+    marginTop: 16,
     color: Colors.primary30.color,
   },
   midIconContainer: {
     gap: 8,
-    marginVertical: 8,
+    marginVertical: 12,
   },
   midIconContentWrapper: {
     flexDirection: 'row',
@@ -77,6 +77,80 @@ const styles = StyleSheet.create({
     color: Colors.primary30.color,
     flex: 1,
   },
+  midTextContentWrapper: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  midTextContentContainer: {
+    marginTop: 12,
+    gap: 12,
+  },
+  midTextContentTitle: {
+    fontSize: 12,
+    ...FontFamily.notoSansRegular,
+    includeFontPadding: false,
+    color: Colors.primary30.color,
+  },
+  midTextContentData: {
+    fontSize: 12,
+    ...FontFamily.notoSansSemiBold,
+    includeFontPadding: false,
+    color: Colors.primary30.color,
+  },
+  applicantDetailContentContainer: {
+    borderRadius: 16,
+    backgroundColor: Colors.neutral100.color,
+    borderWidth: 1,
+    borderColor: Colors.primary70.color,
+    margin: 12,
+    padding: 16,
+    gap: 8,
+  },
+  applicantDetailTextContentWrapper: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+  applicantDetailTextTitle: {
+    fontSize: 12,
+    ...FontFamily.notoSansRegular,
+    includeFontPadding: false,
+    color: Colors.primary30.color,
+    flex: 1,
+  },
+  applicantDetailTextDesc: {
+    fontSize: 12,
+    ...FontFamily.notoSansBold,
+    includeFontPadding: false,
+    color: Colors.primary30.color,
+    flex: 1.2,
+  },
+  applicantDetailContentChildContainer: {
+    padding: 16,
+    borderWidth: 1,
+    marginVertical: 8,
+    borderColor: Colors.primary70.color,
+    borderRadius: 8,
+    gap: 12,
+  },
+  applicantDetailBottomContentWrapper: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  applicantDetailFeeContentWrapper: {
+    flexDirection: 'row',
+    gap: 4,
+    alignItems: 'center',
+  },
+  applicantDetailBottomText: {
+    fontSize: 14,
+    ...FontFamily.notoSansBold,
+    color: Colors.primary30.color,
+  },
+  applicantDetailContentChildButton: {
+    marginTop: 8,
+    backgroundColor: Colors.primary30.color,
+  },
 });
 
 export default styles;

src/screens/history/styles.tsx

@@ -15,12 +15,12 @@ const styles = StyleSheet.create({
     includeFontPadding: false,
   },
   appBarContainer: {
-    height: 64,
+    height: 72,
     backgroundColor: Colors.secondary30.color,
     justifyContent: 'center',
   },
   appBarNavBackContainer: {
-    height: 64,
+    height: 72,
     flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: Colors.secondary30.color,
@@ -41,8 +41,8 @@ const styles = StyleSheet.create({
   },
   cardWrapper: {
     margin: 16,
-    marginBottom: 165,
+    marginBottom: 172,
-    marginTop: -69,
+    marginTop: -85,
   },
   flatllistGap: {
     height: 8,

src/screens/home/index.tsx

@@ -233,7 +233,7 @@ function HomeScreen() {
         barStyle="light-content"
       />
       <View style={styles.appBarContainer}>
-        <Text style={styles.appBarTitle}>Halo, Salwa!</Text>
+        <Text style={styles.appBarTitle}>Halo, X!</Text>
         <Icon
           name="bell-outline"
           size={24}

src/screens/home/styles.tsx

@@ -15,9 +15,10 @@ const styles = StyleSheet.create({
     ...FontFamily.notoSansExtraBold,
     fontSize: 28,
     marginVertical: 14,
+    includeFontPadding: false,
   },
   appBarContainer: {
-    height: 64,
+    height: 72,
     backgroundColor: Colors.secondary30.color,
     justifyContent: 'space-between',
     alignItems: 'center',

src/screens/profile/index.tsx

@@ -27,7 +27,7 @@ function ProfileScreen() {
       </View>
       <View style={styles.topContainer}>
         <Image source={placeholderProfileImage} style={styles.profileImage} />
-        <Text style={styles.accountName}>Salwa Aisyah Adhani</Text>
+        <Text style={styles.accountName}>X</Text>
         <Text style={styles.accountNumber}>3271234560009123456</Text>
       </View>
       <View style={styles.sectionProfileField}>

src/screens/profile/styles.tsx

@@ -17,13 +17,15 @@ const styles = StyleSheet.create({
     color: Colors.neutral100.color,
     ...FontFamily.notoSansExtraBold,
     fontSize: 28,
-    marginStart: 16,
     marginVertical: 14,
+    includeFontPadding: false,
   },
   appBarContainer: {
-    height: 64,
+    height: 72,
     backgroundColor: Colors.secondary30.color,
     justifyContent: 'center',
+    paddingHorizontal: 16,
+    alignContent: 'center',
   },
   profileImage: {
     height: 125,