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

2025-04-22 13:31:45 +07:00
parent 2c77afb399
commit 3e4f427e6c
10 changed files with 226 additions and 16 deletions
--- a/android/gradlew
+++ b/android/gradlew
--- a/package-lock.json
+++ b/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",
--- a/src/data/History/PassportAppointmentData.tsx
+++ b/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',
--- a/src/screens/applicationDetail/index.tsx
+++ b/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>
  );
--- a/src/screens/applicationDetail/styles.tsx
+++ b/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;
--- a/src/screens/history/styles.tsx
+++ b/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,
-    marginTop: -69,
+    marginBottom: 172,
+    marginTop: -85,
  },
  flatllistGap: {
    height: 8,
--- a/src/screens/home/index.tsx
+++ b/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}
--- a/src/screens/home/styles.tsx
+++ b/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',
--- a/src/screens/profile/index.tsx
+++ b/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}>
--- a/src/screens/profile/styles.tsx
+++ b/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,