diff --git a/android/.gradle/7.5.1/executionHistory/executionHistory.bin b/android/.gradle/7.5.1/executionHistory/executionHistory.bin
index 05dd89fa..4ddffb0b 100644
Binary files a/android/.gradle/7.5.1/executionHistory/executionHistory.bin and b/android/.gradle/7.5.1/executionHistory/executionHistory.bin differ
diff --git a/android/.gradle/7.5.1/executionHistory/executionHistory.lock b/android/.gradle/7.5.1/executionHistory/executionHistory.lock
index 9308773a..e245f2fe 100644
Binary files a/android/.gradle/7.5.1/executionHistory/executionHistory.lock and b/android/.gradle/7.5.1/executionHistory/executionHistory.lock differ
diff --git a/android/.gradle/7.5.1/fileHashes/fileHashes.bin b/android/.gradle/7.5.1/fileHashes/fileHashes.bin
index 16c7356b..456f1ec6 100644
Binary files a/android/.gradle/7.5.1/fileHashes/fileHashes.bin and b/android/.gradle/7.5.1/fileHashes/fileHashes.bin differ
diff --git a/android/.gradle/7.5.1/fileHashes/fileHashes.lock b/android/.gradle/7.5.1/fileHashes/fileHashes.lock
index d5ef4ab2..9ed7e155 100644
Binary files a/android/.gradle/7.5.1/fileHashes/fileHashes.lock and b/android/.gradle/7.5.1/fileHashes/fileHashes.lock differ
diff --git a/android/.gradle/buildOutputCleanup/buildOutputCleanup.lock b/android/.gradle/buildOutputCleanup/buildOutputCleanup.lock
index bb574e7a..21d0ea2e 100644
Binary files a/android/.gradle/buildOutputCleanup/buildOutputCleanup.lock and b/android/.gradle/buildOutputCleanup/buildOutputCleanup.lock differ
diff --git a/android/app/build/intermediates/desugar_graph/debug/out/currentProject/dirs_bucket_0/graph.bin b/android/app/build/intermediates/desugar_graph/debug/out/currentProject/dirs_bucket_0/graph.bin
index fe793d8e..8beceac0 100644
Binary files a/android/app/build/intermediates/desugar_graph/debug/out/currentProject/dirs_bucket_0/graph.bin and b/android/app/build/intermediates/desugar_graph/debug/out/currentProject/dirs_bucket_0/graph.bin differ
diff --git a/android/app/build/intermediates/desugar_graph/debug/out/currentProject/dirs_bucket_1/graph.bin b/android/app/build/intermediates/desugar_graph/debug/out/currentProject/dirs_bucket_1/graph.bin
index d1b51b3c..4df6d1bf 100644
Binary files a/android/app/build/intermediates/desugar_graph/debug/out/currentProject/dirs_bucket_1/graph.bin and b/android/app/build/intermediates/desugar_graph/debug/out/currentProject/dirs_bucket_1/graph.bin differ
diff --git a/android/app/build/intermediates/dex/debug/mergeProjectDexDebug/15/classes.dex b/android/app/build/intermediates/dex/debug/mergeProjectDexDebug/15/classes.dex
index 710865d2..7136bd90 100644
Binary files a/android/app/build/intermediates/dex/debug/mergeProjectDexDebug/15/classes.dex and b/android/app/build/intermediates/dex/debug/mergeProjectDexDebug/15/classes.dex differ
diff --git a/android/app/build/intermediates/incremental/packageDebug/tmp/debug/dex-renamer-state.txt b/android/app/build/intermediates/incremental/packageDebug/tmp/debug/dex-renamer-state.txt
index 517f3deb..bd94c85a 100644
--- a/android/app/build/intermediates/incremental/packageDebug/tmp/debug/dex-renamer-state.txt
+++ b/android/app/build/intermediates/incremental/packageDebug/tmp/debug/dex-renamer-state.txt
@@ -1,4 +1,4 @@
-#Mon May 05 11:25:25 SGT 2025
+#Tue May 06 11:28:05 SGT 2025
 path.4=15/classes.dex
 path.3=14/classes.dex
 path.2=0/classes.dex
diff --git a/android/app/build/intermediates/project_dex_archive/debug/out/com/project/yondu/unioilloyaltyapp/MainApplication.dex b/android/app/build/intermediates/project_dex_archive/debug/out/com/project/yondu/unioilloyaltyapp/MainApplication.dex
index f8692740..454bd85f 100644
Binary files a/android/app/build/intermediates/project_dex_archive/debug/out/com/project/yondu/unioilloyaltyapp/MainApplication.dex and b/android/app/build/intermediates/project_dex_archive/debug/out/com/project/yondu/unioilloyaltyapp/MainApplication.dex differ
diff --git a/android/app/build/outputs/apk/debug/app-debug.apk b/android/app/build/outputs/apk/debug/app-debug.apk
index cb45caed..3fe814ab 100644
Binary files a/android/app/build/outputs/apk/debug/app-debug.apk and b/android/app/build/outputs/apk/debug/app-debug.apk differ
diff --git a/android/app/build/tmp/compileDebugJavaWithJavac/previous-compilation-data.bin b/android/app/build/tmp/compileDebugJavaWithJavac/previous-compilation-data.bin
index eb1694c9..3dd3c790 100644
Binary files a/android/app/build/tmp/compileDebugJavaWithJavac/previous-compilation-data.bin and b/android/app/build/tmp/compileDebugJavaWithJavac/previous-compilation-data.bin differ
diff --git a/app/assets/bg_modal.png b/app/assets/bg_modal.png
new file mode 100644
index 00000000..bd45d636
Binary files /dev/null and b/app/assets/bg_modal.png differ
diff --git a/app/components/assets.manager.js b/app/components/assets.manager.js
index 5d0e3423..ba3eacbd 100644
--- a/app/components/assets.manager.js
+++ b/app/components/assets.manager.js
@@ -96,7 +96,8 @@ const bg = {
   scheduler: require("../assets/bg_scheduler.png"),
   about: require("../assets/img_bg_about.png"),
   loginBg: require('../assets/login_background.jpg'),
-  login_bg: require('../assets/login_bg.jpg')
+  login_bg: require('../assets/login_bg.jpg'),
+  modal_bg: require("../assets/bg_modal.png"),
 }
 
 const boarding = [
diff --git a/app/components/elements.js b/app/components/elements.js
index 0f752337..167c0c2c 100644
--- a/app/components/elements.js
+++ b/app/components/elements.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState, useRef} from 'react';
+import { useState, useRef } from 'react';
 import { Platform, View, Text, Image, TouchableOpacity, ScrollView, StyleSheet, TextInput, Modal, ActivityIndicator, Alert } from 'react-native'
 import { Button, Icon, Divider, Input } from 'react-native-elements'
 import { Actionsheet } from 'native-base';
@@ -20,7 +20,7 @@ var styles = StyleSheet.create({
     flexDirection: 'column',
     alignItems: 'flex-start',
     width: '100%',
-      padding: 15
+    padding: 15
   },
   row: {
     flexDirection: 'row',
@@ -43,7 +43,7 @@ var styles = StyleSheet.create({
   normalText: {
     color: 'rgba(0, 0, 0, 0.7)'
   },
-    container: {
+  container: {
     flex: 1,
     backgroundColor: 'blue',
     flexDirection: 'row',
@@ -94,100 +94,100 @@ var styles = StyleSheet.create({
 const ModalDialogContainer = (props) => {
   const Content = props.content;
   return (
-    <View style={{flex: 1, width: '100%', height: '100%', position: 'absolute', zIndex: 1, backgroundColor: '#00000060'}}>
-      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
-      <View style={{flex: 1, flexDirection: 'row'}}>
-        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1,backgroundColor: '#00000060'}}></TouchableOpacity>
-        <View style={{flex: 10, backgroundColor: '#fff'}}>
+    <View style={{ flex: 1, width: '100%', height: '100%', position: 'absolute', zIndex: 1, backgroundColor: '#00000060' }}>
+      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, width: '100%', backgroundColor: '#00000060' }}></TouchableOpacity>
+      <View style={{ flex: 1, flexDirection: 'row' }}>
+        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, backgroundColor: '#00000060' }}></TouchableOpacity>
+        <View style={{ flex: 10, backgroundColor: '#fff' }}>
           <Content props />
         </View>
-        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
+        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, backgroundColor: '#00000060' }}></TouchableOpacity>
       </View>
-      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
+      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, width: '100%', backgroundColor: '#00000060' }}></TouchableOpacity>
     </View>)
 }
 
-const ul = function(props){
+const ul = function (props) {
 
   const [drop, setdrop] = useState(false);
 
   const renderlist = (dataset) => {
     return dataset.map((data, index) => {
       return (
-      <View key={index} style={ styles.row }>
-        <View style={ styles.bullet }>
-          <Text>{'\u2022' + " "}</Text>
-        </View>
-        <View style={ styles.bulletText }>
-          <Text>
-            <Text style={ styles.normalText }>{data.label}</Text>
-          </Text>
-        </View>
-      </View>)
+        <View key={index} style={styles.row}>
+          <View style={styles.bullet}>
+            <Text>{'\u2022' + " "}</Text>
+          </View>
+          <View style={styles.bulletText}>
+            <Text>
+              <Text style={styles.normalText}>{data.label}</Text>
+            </Text>
+          </View>
+        </View>)
     })
   }
 
   return (
-  <View style={{backgroundColor: 'red'}}>
-    <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
-      <TouchableOpacity activeOpacity={1} style={{flex: 1, flexDirection: 'row'}} onPress={() => {setdrop(!drop)}}>
-        <Text style={{flex:3, marginTop: 15, fontWeight: 'bold'}}>{props.title}</Text>
-        <View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
-          <Icon name={drop ? "expand-more" : "chevron-right"} color="gray" />
-        </View>
-      </TouchableOpacity>
-    </View>
-    {drop ? <View style={ styles.column }>{renderlist(props.list || [])}</View> : null}
-  </View>)
+    <View style={{ backgroundColor: 'red' }}>
+      <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}>
+        <TouchableOpacity activeOpacity={1} style={{ flex: 1, flexDirection: 'row' }} onPress={() => { setdrop(!drop) }}>
+          <Text style={{ flex: 3, marginTop: 15, fontWeight: 'bold' }}>{props.title}</Text>
+          <View style={{ flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal' }}>
+            <Icon name={drop ? "expand-more" : "chevron-right"} color="gray" />
+          </View>
+        </TouchableOpacity>
+      </View>
+      {drop ? <View style={styles.column}>{renderlist(props.list || [])}</View> : null}
+    </View>)
 }
 
-const product = function(props){
+const product = function (props) {
   return (
-    <TouchableOpacity onPress={props.onPress || null} style={{flexBasis: '45%', width: '45%', padding: 5, margin: '2.5%', borderRadius: 15, borderWidth: 0.08}}>
-      <View style={{borderRadius: 15, height: props.height || 120, justifyContent: 'center', alignItems: 'center'}}>
-        <Image source={props.image || {uri: null}} style={{width: '90%', height: '90%', borderRadius: 15, resizeMode: 'contain'}} />
+    <TouchableOpacity onPress={props.onPress || null} style={{ flexBasis: '45%', width: '45%', padding: 5, margin: '2.5%', borderRadius: 15, borderWidth: 0.08 }}>
+      <View style={{ borderRadius: 15, height: props.height || 120, justifyContent: 'center', alignItems: 'center' }}>
+        <Image source={props.image || { uri: null }} style={{ width: '90%', height: '90%', borderRadius: 15, resizeMode: 'contain' }} />
       </View>
-      <Text style={{padding: 10, fontSize: 16, color: Theme.colors.textPrimary}}>{props.title}</Text>
+      <Text style={{ padding: 10, fontSize: 16, color: Theme.colors.textPrimary }}>{props.title}</Text>
     </TouchableOpacity>
   )
 }
 
-const loyaltycard = function(props){
+const loyaltycard = function (props) {
   return (
-    <TouchableOpacity onPress={props.onPress || null} style={{flexBasis: '45%', width: '45%', margin: '2.5%', borderRadius: 15, borderWidth: 0.08}}>
-      <View style={{height: props.height || 120, justifyContent: 'center', alignItems: 'center'}}>
-        <Image source={props.image} style={{width: '100%', height: '100%', borderTopLeftRadius: 15,borderTopRightRadius: 15, borderBottomLeftRadius: 15, borderBottomRightRadius: 15,  resizeMode: 'stretch'}} />
+    <TouchableOpacity onPress={props.onPress || null} style={{ flexBasis: '45%', width: '45%', margin: '2.5%', borderRadius: 15, borderWidth: 0.08 }}>
+      <View style={{ height: props.height || 120, justifyContent: 'center', alignItems: 'center' }}>
+        <Image source={props.image} style={{ width: '100%', height: '100%', borderTopLeftRadius: 15, borderTopRightRadius: 15, borderBottomLeftRadius: 15, borderBottomRightRadius: 15, resizeMode: 'stretch' }} />
       </View>
-      <Text style={{padding: 10, color: Theme.colors.darkGray, fontSize: 16, textAlign: 'center'}}>{props.title}</Text>
+      <Text style={{ padding: 10, color: Theme.colors.darkGray, fontSize: 16, textAlign: 'center' }}>{props.title}</Text>
     </TouchableOpacity>
   )
 }
 
-const card = function(props){
+const card = function (props) {
   let h = props.height ? props.height : 130
   return (
-    <TouchableOpacity onPress={props.onPress} activeOpacity={ props.disabled || 0} style={{flex: 1, height: h, margin: 5, borderRadius: 15, elevation: 0, borderTopLeftRadius: 15, borderTopRightRadius: 15, overflow: 'hidden'}}>
-      <View style={{flex: 1}}>
-        <Image 
-          source={props.image} 
+    <TouchableOpacity onPress={props.onPress} activeOpacity={props.disabled || 0} style={{ flex: 1, height: h, margin: 5, borderRadius: 15, elevation: 0, borderTopLeftRadius: 15, borderTopRightRadius: 15, overflow: 'hidden' }}>
+      <View style={{ flex: 1 }}>
+        <Image
+          source={props.image}
           style={
             {
               width: '100%',
               borderTopLeftRadius: 15,
               borderTopRightRadius: 15,
               height: '100%',
-            }} 
+            }}
         />
       </View>
-      <Text numberOfLines={1} adjustsFontSizeToFit={true} style={{backgroundColor: '#fff', padding: 5, marginBottom: 0, borderBottomLeftRadius: 15, borderBottomRightRadius: 15, fontSize: 15, color: 'gray', textAlign: props.titlealign || 'center', elevation: 0}}>{props.title}</Text>
+      <Text numberOfLines={1} adjustsFontSizeToFit={true} style={{ backgroundColor: '#fff', padding: 5, marginBottom: 0, borderBottomLeftRadius: 15, borderBottomRightRadius: 15, fontSize: 15, color: 'gray', textAlign: props.titlealign || 'center', elevation: 0 }}>{props.title}</Text>
     </TouchableOpacity>)
 }
 
-const button = function(props){
-  return (<Button title={props.title} type={props.type}/>)
+const button = function (props) {
+  return (<Button title={props.title} type={props.type} />)
 }
 
-const input = function(props){
+const input = function (props) {
   return (<Input
     leftIcon={props.leftIcon || {}}
     placeholder={props.placeholder}
@@ -196,60 +196,60 @@ const input = function(props){
   />)
 }
 
-const icon = function(props){
-  return (<Image source={Assets.icons[props.name]} style={{width: props.size || 20, height: props.size || 20, resizeMode: props.resizeMode || 'cover', marginBottom: props.marginBottom || 0}} />)
+const icon = function (props) {
+  return (<Image source={Assets.icons[props.name]} style={{ width: props.size || 20, height: props.size || 20, resizeMode: props.resizeMode || 'cover', marginBottom: props.marginBottom || 0 }} />)
 }
 
-const transaction = function(Props){
+const transaction = function (Props) {
   const props = Props.data
   const getTransactionRedeemedPoints = (points, items) => {
-    if(!items) return 0 + points;
-    
+    if (!items) return 0 + points;
+
     let res = 0
-    for(var x=0;x<items.length;x++){ if(items[x].item == 'EPURSE' || items[x].item == '' && items[x].quantity > 0) res += items[x].quantity}
+    for (var x = 0; x < items.length; x++) { if (items[x].item == 'EPURSE' || items[x].item == '' && items[x].quantity > 0) res += items[x].quantity }
     return res + points
   }
 
   return (
-    <View style={{flex: 0, width: '95%', marginLeft: '2.5%', marginTop: 15, paddingVertical: 6, paddingHorizontal: 10 , backgroundColor: props.station == 'HO' ? Theme.colors.lightGray : Props.isDarkMode ? Props.cardBackgroundColor : Theme.colors.lightGray, borderWidth: 0.1, borderRadius: 14, borderColor: 'transparent', elevation: 5 }}>
-      <Text style={{fontFamily: 'Arial', paddingBottom: 10, color: Props.isDarkMode ? Props.textColor : Theme.colors.darkerGray}}>{dateFormater(props.date)}</Text>
-      <TouchableOpacity activeOpacity={1} onPress={props.station == 'HO' ? null : Props.onPress} style={{flex: 1, flexDirection: 'row', marginTop: 0}}>
-          <View style={{flex: 3, paddingTop: 5, paddingBottom: 5}}>
-            <View style={{flex: 1, flexDirection: 'column'}}>
-              <Text style={{fontFamily: 'Arial', color: Props.isDarkMode ? Props.textColor : Theme.colors.darkerGray}}>{props.station || 'APP'}</Text>
-              {
-                props.station !== "APP" &&
-                  <View style={{flex: 4, flexDirection: 'row'}}>
-                    <CustomIcon.AntDesign name={props.rating >= 1 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
-                    <CustomIcon.AntDesign name={props.rating >= 2 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
-                    <CustomIcon.AntDesign name={props.rating >= 3 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
-                    <CustomIcon.AntDesign name={props.rating >= 4 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
-                    <CustomIcon.AntDesign name={props.rating >= 5 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
-                  </View>
-              }
-            </View>
+    <View style={{ flex: 0, width: '95%', marginLeft: '2.5%', marginTop: 15, paddingVertical: 6, paddingHorizontal: 10, backgroundColor: props.station == 'HO' ? Theme.colors.lightGray : Props.isDarkMode ? Props.cardBackgroundColor : Theme.colors.lightGray, borderWidth: 0.1, borderRadius: 14, borderColor: 'transparent', elevation: 5 }}>
+      <Text style={{ fontFamily: 'Arial', paddingBottom: 10, color: Props.isDarkMode ? Props.textColor : Theme.colors.darkerGray }}>{dateFormater(props.date)}</Text>
+      <TouchableOpacity activeOpacity={1} onPress={props.station == 'HO' ? null : Props.onPress} style={{ flex: 1, flexDirection: 'row', marginTop: 0 }}>
+        <View style={{ flex: 3, paddingTop: 5, paddingBottom: 5 }}>
+          <View style={{ flex: 1, flexDirection: 'column' }}>
+            <Text style={{ fontFamily: 'Arial', color: Props.isDarkMode ? Props.textColor : Theme.colors.darkerGray }}>{props.station || 'APP'}</Text>
+            {
+              props.station !== "APP" &&
+              <View style={{ flex: 4, flexDirection: 'row' }}>
+                <CustomIcon.AntDesign name={props.rating >= 1 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
+                <CustomIcon.AntDesign name={props.rating >= 2 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
+                <CustomIcon.AntDesign name={props.rating >= 3 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
+                <CustomIcon.AntDesign name={props.rating >= 4 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
+                <CustomIcon.AntDesign name={props.rating >= 5 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
+              </View>
+            }
           </View>
-          <View style={{flex: 5, paddingTop: 5, paddingLeft: 5, paddingBottom: 5}}>
-            <View style={{flex: 1, flexDirection: 'column'}}>
-              <Text style={{fontFamily: 'Arial', fontWeight: 'bold', color: Props.isDarkMode ? Props.textColor : Theme.colors.black}}>{"\u20B1"} {Theme.formatter.CRNCY(props.total_amount) || "0.00"}</Text>
-              <Text style={{fontFamily: 'Arial', color: Props.isDarkMode ? Props.textColor : Theme.colors.darkerGray}}>Earned: {Theme.formatter.CRNCY(props.earned) || "0.00"} PTS</Text>
-              <Text style={{fontFamily: 'Arial', color: Props.isDarkMode ? Props.textColor : Theme.colors.darkerGray}}>Redeemed: {Theme.formatter.CRNCY(getTransactionRedeemedPoints(props.redeemed, props.items))} PTS</Text>
-            </View>
+        </View>
+        <View style={{ flex: 5, paddingTop: 5, paddingLeft: 5, paddingBottom: 5 }}>
+          <View style={{ flex: 1, flexDirection: 'column' }}>
+            <Text style={{ fontFamily: 'Arial', fontWeight: 'bold', color: Props.isDarkMode ? Props.textColor : Theme.colors.black }}>{"\u20B1"} {Theme.formatter.CRNCY(props.total_amount) || "0.00"}</Text>
+            <Text style={{ fontFamily: 'Arial', color: Props.isDarkMode ? Props.textColor : Theme.colors.darkerGray }}>Earned: {Theme.formatter.CRNCY(props.earned) || "0.00"} PTS</Text>
+            <Text style={{ fontFamily: 'Arial', color: Props.isDarkMode ? Props.textColor : Theme.colors.darkerGray }}>Redeemed: {Theme.formatter.CRNCY(getTransactionRedeemedPoints(props.redeemed, props.items))} PTS</Text>
           </View>
-        { !Props.disabled && <View style={{flex: 1, paddingTop: 5, paddingBottom: 5}}>
+        </View>
+        {!Props.disabled && <View style={{ flex: 1, paddingTop: 5, paddingBottom: 5 }}>
           <CustomIcon.Feather name="chevron-right" size={40} color={props.station == 'HO' ? 'gray' : Theme.colors.primary} />
         </View>}
       </TouchableOpacity>
     </View>
-    )
+  )
 }
 
-const transactiontable = function(Props){
+const transactiontable = function (Props) {
   const transaction = Props.data;
-  const items = Props.data.items || [];  
+  const items = Props.data.items || [];
   const getTransactionRedeemedPoints = (points, items) => {
     let res = 0
-    for(var x=0;x<items.length;x++){ if(items[x].item == 'EPURSE' || items[x].item == '' && items[x].quantity > 0) res += items[x].quantity}
+    for (var x = 0; x < items.length; x++) { if (items[x].item == 'EPURSE' || items[x].item == '' && items[x].quantity > 0) res += items[x].quantity }
     return res + points
   }
   const getDiscount = () => {
@@ -259,60 +259,60 @@ const transactiontable = function(Props){
   }
   const renderItem = () => {
     return items.filter(item => !item.price.toString().includes("-")).map((item, index) => {
-      if(item.item == 'EPURSE' || item.item == '') return null
+      if (item.item == 'EPURSE' || item.item == '') return null
       return (
-        <View key={index} style={{flex: 1, flexDirection: 'row', paddingTop: 10, alignItems: 'center'}}>
-          <Text style={{flex: 4, fontFamily: 'Arial', textAlign: 'center', fontSize: 13, color: Props.textColor}}>{item.item}</Text>
-          <Text style={{flex: 2, fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'center', fontSize: 13, color: Props.textColor}}>{item.price.toString().includes("-") ? "" : Theme.formatter.CRNCY(item.quantity.toFixed(2))}</Text>
-          <Text style={{flex: 2, fontFamily: 'Arial', fontWeight: 'bold',textAlign: 'center', fontSize: 13, color: Props.textColor}}>{`\u20B1 ${Theme.formatter.CRNCY(item.price)}`}</Text>
+        <View key={index} style={{ flex: 1, flexDirection: 'row', paddingTop: 10, alignItems: 'center' }}>
+          <Text style={{ flex: 4, fontFamily: 'Arial', textAlign: 'center', fontSize: 13, color: Props.textColor }}>{item.item}</Text>
+          <Text style={{ flex: 2, fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'center', fontSize: 13, color: Props.textColor }}>{item.price.toString().includes("-") ? "" : Theme.formatter.CRNCY(item.quantity.toFixed(2))}</Text>
+          <Text style={{ flex: 2, fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'center', fontSize: 13, color: Props.textColor }}>{`\u20B1 ${Theme.formatter.CRNCY(item.price)}`}</Text>
         </View>)
     })
   }
 
   const showDiscount = Props.showDiscount && getDiscount() !== 0;
 
-  return (<View style={{width: '100%'}}>
-          {/* TABLE HEADER */}
-          <Divider />
-            <View style={{flex: 1, flexDirection: 'row', paddingVertical: 20, alignItems: 'center'}}>
-              <Text style={{flex: 4, height: 15, fontFamily: 'Arial', color: Props.textColor, fontSize: 11, textAlign: 'center'}}>Products</Text>
-              <Text style={{flex: 2, height: 15, fontFamily: 'Arial', color: Props.textColor, fontSize: 11, textAlign: 'center'}}>Qty</Text>
-              <Text style={{flex: 2, height: 15, fontFamily: 'Arial', color: Props.textColor, fontSize: 11, textAlign: 'center'}}>Price</Text>
-            </View>
-          <Divider />
-          {/* TABLE HEADER */}
+  return (<View style={{ width: '100%' }}>
+    {/* TABLE HEADER */}
+    <Divider />
+    <View style={{ flex: 1, flexDirection: 'row', paddingVertical: 20, alignItems: 'center' }}>
+      <Text style={{ flex: 4, height: 15, fontFamily: 'Arial', color: Props.textColor, fontSize: 11, textAlign: 'center' }}>Products</Text>
+      <Text style={{ flex: 2, height: 15, fontFamily: 'Arial', color: Props.textColor, fontSize: 11, textAlign: 'center' }}>Qty</Text>
+      <Text style={{ flex: 2, height: 15, fontFamily: 'Arial', color: Props.textColor, fontSize: 11, textAlign: 'center' }}>Price</Text>
+    </View>
+    <Divider />
+    {/* TABLE HEADER */}
 
-          {/* TABLE CONTENT */}
-          <ScrollView style={{ width: '100%', height: 170}}>
-            {renderItem()}
-            <View style={{padding: 10}}></View>
-          </ScrollView>
-          {/* TABLE CONTENT */}
-          
-          <Divider />
-            <View style={{flex: 1, flexDirection: 'row', padding: 15, marginTop: 10, alignItems: 'center'}}>
-              <Text style={{flex: 4, height: 30, fontFamily: 'Arial', fontWeight: 'bold', fontSize: 20, textAlign: 'left', color: Theme.colors.darkGray}}>Total</Text>
-              <Text style={{flex: 2, height: 30, fontFamily: 'Arial', fontWeight: 'bold', fontSize: 20, textAlign: 'right', color: Props.textColor}}>{"\u20B1"} {Theme.formatter.CRNCY(transaction.total_amount)}</Text>
-            </View>
-            <View style={{flex: 1, flexDirection: 'row', padding: 15, alignItems: 'center'}}>
-              <Text style={{flex: 4, height: 30, fontFamily: 'Arial', textAlign: 'left', fontSize: 16, color: Theme.colors.darkGray}}>Earned</Text>
-              <Text style={{flex: 2,height: 30, fontFamily: 'Arial', textAlign: 'right', fontSize: 16, color: Props.isDarkMode ? Props.textColor : "#000"}}>{Theme.formatter.CRNCY(transaction.earned)} PTS</Text>
-            </View>
-            <View style={{flex: 1, flexDirection: 'row', paddingHorizontal: 15, paddingVertical: 5, paddingBottom: showDiscount ? 5 : 20, alignItems: 'center'}}>
-              <Text style={{flex: 4, height: 30, fontFamily: 'Arial', textAlign: 'left', fontSize: 16, color: Theme.colors.darkGray}}>Redeemed</Text>
-              <Text style={{flex: 2, height: 30, fontFamily: 'Arial', textAlign: 'right', fontSize: 16, color: Props.isDarkMode ? Props.textColor : "#000"}}>{Theme.formatter.CRNCY(getTransactionRedeemedPoints(transaction.redeemed, items))} PTS</Text>
-            </View>
-            {showDiscount && 
-                <View style={{flex: 1, flexDirection: 'row', paddingHorizontal: 15, paddingVertical: 15, marginBottom: 5, alignItems: 'center'}}>
-                  <Text style={{flex: 4, height: 30, fontFamily: 'Arial', textAlign: 'left', fontSize: 16, color: Theme.colors.darkGray}}>Discount</Text>
-                  <Text style={{flex: 2, height: 30, fontFamily: 'Arial', textAlign: 'right', fontSize: 16, color: Props.isDarkMode ? Props.textColor : "#000"}}>{`- \u20B1 ${Theme.formatter.CRNCY(getDiscount())}`}</Text>
-                </View>
-            }
-          <Divider />
-        </View>)
+    {/* TABLE CONTENT */}
+    <ScrollView style={{ width: '100%', height: 170 }}>
+      {renderItem()}
+      <View style={{ padding: 10 }}></View>
+    </ScrollView>
+    {/* TABLE CONTENT */}
+
+    <Divider />
+    <View style={{ flex: 1, flexDirection: 'row', padding: 15, marginTop: 10, alignItems: 'center' }}>
+      <Text style={{ flex: 4, height: 30, fontFamily: 'Arial', fontWeight: 'bold', fontSize: 20, textAlign: 'left', color: Theme.colors.darkGray }}>Total</Text>
+      <Text style={{ flex: 2, height: 30, fontFamily: 'Arial', fontWeight: 'bold', fontSize: 20, textAlign: 'right', color: Props.textColor }}>{"\u20B1"} {Theme.formatter.CRNCY(transaction.total_amount)}</Text>
+    </View>
+    <View style={{ flex: 1, flexDirection: 'row', padding: 15, alignItems: 'center' }}>
+      <Text style={{ flex: 4, height: 30, fontFamily: 'Arial', textAlign: 'left', fontSize: 16, color: Theme.colors.darkGray }}>Earned</Text>
+      <Text style={{ flex: 2, height: 30, fontFamily: 'Arial', textAlign: 'right', fontSize: 16, color: Props.isDarkMode ? Props.textColor : "#000" }}>{Theme.formatter.CRNCY(transaction.earned)} PTS</Text>
+    </View>
+    <View style={{ flex: 1, flexDirection: 'row', paddingHorizontal: 15, paddingVertical: 5, paddingBottom: showDiscount ? 5 : 20, alignItems: 'center' }}>
+      <Text style={{ flex: 4, height: 30, fontFamily: 'Arial', textAlign: 'left', fontSize: 16, color: Theme.colors.darkGray }}>Redeemed</Text>
+      <Text style={{ flex: 2, height: 30, fontFamily: 'Arial', textAlign: 'right', fontSize: 16, color: Props.isDarkMode ? Props.textColor : "#000" }}>{Theme.formatter.CRNCY(getTransactionRedeemedPoints(transaction.redeemed, items))} PTS</Text>
+    </View>
+    {showDiscount &&
+      <View style={{ flex: 1, flexDirection: 'row', paddingHorizontal: 15, paddingVertical: 15, marginBottom: 5, alignItems: 'center' }}>
+        <Text style={{ flex: 4, height: 30, fontFamily: 'Arial', textAlign: 'left', fontSize: 16, color: Theme.colors.darkGray }}>Discount</Text>
+        <Text style={{ flex: 2, height: 30, fontFamily: 'Arial', textAlign: 'right', fontSize: 16, color: Props.isDarkMode ? Props.textColor : "#000" }}>{`- \u20B1 ${Theme.formatter.CRNCY(getDiscount())}`}</Text>
+      </View>
+    }
+    <Divider />
+  </View>)
 }
 
-const custominput = function(props){
+const custominput = function (props) {
   let customstyle = props.style || {}
   let customtitlestyle = props.titlestyle || {}
   let fontsize = props.fontsize || 15
@@ -320,10 +320,10 @@ const custominput = function(props){
   let activeborderwidth = props.activeborderwidth || 1.5
   const input = () => {
     return (
-      <View style={{flex: 1, marginBottom: 15, ...customstyle}}>
-        <Text style={{padding: 5, paddingLeft: 15, fontSize: 12, color: props.focused ? Theme.colors.accent : Theme.colors.darkGray, ...customtitlestyle}}>{props.title}</Text>
+      <View style={{ flex: 1, marginBottom: 15, ...customstyle }}>
+        <Text style={{ padding: 5, paddingLeft: 15, fontSize: 12, color: props.focused ? Theme.colors.accent : Theme.colors.darkGray, ...customtitlestyle }}>{props.title}</Text>
         <Input
-          focused={props.focused|| false}
+          focused={props.focused || false}
           disabled={props.disabled || false}
           keyboardType={props.keyboardType || 'default'}
           maxLength={props.maxLength || undefined}
@@ -332,90 +332,90 @@ const custominput = function(props){
           placeholderTextColor={props.placeholderColor}
           onChangeText={props.onChangeText}
           onFocus={props.onFocus}
-          containerStyle={{padding: 0}}
-          inputContainerStyle={{padding: 0, borderBottomWidth: props.focused ? 1.5 : 0.75, borderColor: props.hasError ? Theme.colors.primary : props.focused ? Theme.colors.accent : props.disabled ? "lightgray" : "black" }}
-          inputStyle={{padding: 5, fontFamily: 'Arial', fontSize: 14, borderWidth: 0, color: props?.isDarkMode ? props.textColor : Theme.colors.black}}
+          containerStyle={{ padding: 0 }}
+          inputContainerStyle={{ padding: 0, borderBottomWidth: props.focused ? 1.5 : 0.75, borderColor: props.hasError ? Theme.colors.primary : props.focused ? Theme.colors.accent : props.disabled ? "lightgray" : "black" }}
+          inputStyle={{ padding: 5, fontFamily: 'Arial', fontSize: 14, borderWidth: 0, color: props?.isDarkMode ? props.textColor : Theme.colors.black }}
         />
-        {props.bottomText ? <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray}}>{props.bottomText}</Text></View> : null}
-        {props.bottomOption ? 
-          <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray}}>If you wish to change this, please contact</Text>
-          <TouchableOpacity onPress={props.onContact || null}>
-            <Text style={{paddingLeft: 15, fontSize: 15, color: Theme.colors.accent}}>Unioil Customer Service</Text>
-          </TouchableOpacity></View> : null }
-          {props.hasError ? <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.primary}}>{props.errorMessage}</Text></View> : null}
+        {props.bottomText ? <View><Text style={{ paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray }}>{props.bottomText}</Text></View> : null}
+        {props.bottomOption ?
+          <View><Text style={{ paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray }}>If you wish to change this, please contact</Text>
+            <TouchableOpacity onPress={props.onContact || null}>
+              <Text style={{ paddingLeft: 15, fontSize: 15, color: Theme.colors.accent }}>Unioil Customer Service</Text>
+            </TouchableOpacity></View> : null}
+        {props.hasError ? <View><Text style={{ paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.primary }}>{props.errorMessage}</Text></View> : null}
       </View>
     )
   }
   const select = () => {
     return (
-    <View style={{flex: 1, marginBottom: 15, ...customstyle}}>
-      <Text style={{padding: 5, paddingLeft: 15, fontSize: fontsize, color: props.focused ? Theme.colors.accent : Theme.colors.darkGray,...customtitlestyle}}>{props.title}</Text>
-      <TouchableOpacity onPress={props.onPress} style={{padding: 10, ...customstyle}}>
-        <View style={{padding: 0, borderBottomWidth: props.focused ? activeborderwidth : inactiveborderwidth, borderColor: props.hasError ? Theme.colors.primary : props.focused ? Theme.colors.accent : props.disabled ? "lightgray" : "black" }}>
-          <Text style={{fontSize: 14, fontFamily: 'Arial', paddingLeft: 5, paddingBottom: 10, color: props?.isDarkMode ? props.textColor : Theme.colors.black}}>{props.value || ""}</Text>
-        </View>
-      </TouchableOpacity>
-      {props.bottomText ? <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray}}>{props.bottomText}</Text></View> : null}
-      {props.bottomOption ? 
-        <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray}}>If you wish to change this, please contact</Text>
-        <TouchableOpacity onPress={props.onContact || null}>
-          <Text style={{paddingLeft: 15, fontSize: 14, color: Theme.colors.accent}}>Unioil Customer Service</Text>
-        </TouchableOpacity></View> : null }
-        {props.hasError ? <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.primary}}>{props.errorMessage}</Text></View> : null}
-    </View>)
+      <View style={{ flex: 1, marginBottom: 15, ...customstyle }}>
+        <Text style={{ padding: 5, paddingLeft: 15, fontSize: fontsize, color: props.focused ? Theme.colors.accent : Theme.colors.darkGray, ...customtitlestyle }}>{props.title}</Text>
+        <TouchableOpacity onPress={props.onPress} style={{ padding: 10, ...customstyle }}>
+          <View style={{ padding: 0, borderBottomWidth: props.focused ? activeborderwidth : inactiveborderwidth, borderColor: props.hasError ? Theme.colors.primary : props.focused ? Theme.colors.accent : props.disabled ? "lightgray" : "black" }}>
+            <Text style={{ fontSize: 14, fontFamily: 'Arial', paddingLeft: 5, paddingBottom: 10, color: props?.isDarkMode ? props.textColor : Theme.colors.black }}>{props.value || ""}</Text>
+          </View>
+        </TouchableOpacity>
+        {props.bottomText ? <View><Text style={{ paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray }}>{props.bottomText}</Text></View> : null}
+        {props.bottomOption ?
+          <View><Text style={{ paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray }}>If you wish to change this, please contact</Text>
+            <TouchableOpacity onPress={props.onContact || null}>
+              <Text style={{ paddingLeft: 15, fontSize: 14, color: Theme.colors.accent }}>Unioil Customer Service</Text>
+            </TouchableOpacity></View> : null}
+        {props.hasError ? <View><Text style={{ paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.primary }}>{props.errorMessage}</Text></View> : null}
+      </View>)
   }
   return props.type == "input" ? input() : select();
 }
 
-const checkboxdialog = function(props){
+const checkboxdialog = function (props) {
 
-  if(!props.shown) return null;
+  if (!props.shown) return null;
   let itemsCount = props.items.length;
   let size;
 
-  if(itemsCount == 2) size = 1.1;
+  if (itemsCount == 2) size = 1.1;
   else if (itemsCount == 4) size = 2.2;
 
   const renderItems = () => {
     return props.items.map((item, index) => {
-      if(item.string == "") return null
+      if (item.string == "") return null
       let color = props.selected == item.value ? Theme.colors.accent : Theme.colors.darkGray;
       let bullet = props.selected == item.value ? "radiobox-marked" : "radiobox-blank";
       return (
-      <TouchableOpacity key={index} onPress={() => props.onSelect(item.value, item.string)} style={{flexDirection: 'row', alignItems: 'flex-start', padding:5, marginTop: 10}}>
-        <View style={{flex: 1}}>
-          <Text style={{textAlign: 'center', padding: 2.5}}>
-            <CustomIcon.MaterialCommunityIcons color={color} name={bullet} size={25} />
-          </Text>
-        </View>
-        <View style={{flex: 5}}><Text style={{padding: 5, color: Theme.colors.darkGray, fontSize: 16}}>{item.string}</Text></View>
-      </TouchableOpacity>)
+        <TouchableOpacity key={index} onPress={() => props.onSelect(item.value, item.string)} style={{ flexDirection: 'row', alignItems: 'flex-start', padding: 5, marginTop: 10 }}>
+          <View style={{ flex: 1 }}>
+            <Text style={{ textAlign: 'center', padding: 2.5 }}>
+              <CustomIcon.MaterialCommunityIcons color={color} name={bullet} size={25} />
+            </Text>
+          </View>
+          <View style={{ flex: 5 }}><Text style={{ padding: 5, color: Theme.colors.darkGray, fontSize: 16 }}>{item.string}</Text></View>
+        </TouchableOpacity>)
     })
   }
 
   return (
-    <View style={{flex: 1, width: '100%', height: '100%', top: Platform.OS == 'ios' ?  45 : 0, position: 'absolute', zIndex: 1, backgroundColor: '#00000060'}}>
-      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 35, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
-      <View style={{flex: size, flexDirection: 'row'}}>
-        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
-        <View style={{flex: 12, backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff'}}>
-          <View style={{width: '100%', backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff', padding: 20}}>
-            <View style={{padding: 10}}>
-              <Text style={{fontWeight: 'bold', fontFamily: 'Arial', fontSize: 18, color: props.isDarkMode ? props.textColor : Theme.colors.darkerGray}}>{props.title}</Text>
+    <View style={{ flex: 1, width: '100%', height: '100%', top: Platform.OS == 'ios' ? 45 : 0, position: 'absolute', zIndex: 1, backgroundColor: '#00000060' }}>
+      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, padding: 35, width: '100%', backgroundColor: '#00000060' }}></TouchableOpacity>
+      <View style={{ flex: size, flexDirection: 'row' }}>
+        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, backgroundColor: '#00000060' }}></TouchableOpacity>
+        <View style={{ flex: 12, backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff' }}>
+          <View style={{ width: '100%', backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff', padding: 20 }}>
+            <View style={{ padding: 10 }}>
+              <Text style={{ fontWeight: 'bold', fontFamily: 'Arial', fontSize: 18, color: props.isDarkMode ? props.textColor : Theme.colors.darkerGray }}>{props.title}</Text>
             </View>
-            <View style={{marginTop: 5}}>
+            <View style={{ marginTop: 5 }}>
               {props.items ? renderItems() : null}
             </View>
           </View>
         </View>
-        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
+        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, backgroundColor: '#00000060' }}></TouchableOpacity>
       </View>
-      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 35, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
+      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, padding: 35, width: '100%', backgroundColor: '#00000060' }}></TouchableOpacity>
     </View>
   )
 }
 
-const shadowView = function(props) {
+const shadowView = function (props) {
   const {
     elevation,
     shadowRadius,
@@ -435,7 +435,7 @@ const shadowView = function(props) {
       shadowColor: newShadowColor,
       shadowOffset: newShadowOffset,
       shadowOpacity: newShadowOpacity,
-      shadowRadius: newShadowRadius, 
+      shadowRadius: newShadowRadius,
       elevation: newElevation,
       ...props.style,
     }}>
@@ -444,145 +444,145 @@ const shadowView = function(props) {
   )
 }
 
-const inputdialog = function(props){
+const inputdialog = function (props) {
   const _textInput = useRef(null);
 
-  if(!props.shown) return null;
+  if (!props.shown) return null;
   let value = "";
   const titlecolor = props.current == props.index && props.focus ? Theme.colors.accent : Theme.colors.darkGray
   const bordercolor = props.error ? Theme.colors.primary : (props.focus && props.current == props.index ? Theme.colors.accent : 'gray')
   const borderwidth = props.error ? 1.6 : (props.focus && props.current == props.index ? 1.5 : 1)
 
   const style = {
-    container: {flexDirection: 'row', width: '100%', marginTop: props.top || 1, alignItems: 'center'},
-    title: {fontSize: 12, color: titlecolor, marginTop: -25, marginBottom: 15},
-    input: {width: '100%', fontSize: 16, padding: 0, borderBottomColor: bordercolor, borderBottomWidth: borderwidth, color: props.isDarkMode ? props.textColor : Theme.colors.black},
-    error: {fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 5}
+    container: { flexDirection: 'row', width: '100%', marginTop: props.top || 1, alignItems: 'center' },
+    title: { fontSize: 12, color: titlecolor, marginTop: -25, marginBottom: 15 },
+    input: { width: '100%', fontSize: 16, padding: 0, borderBottomColor: bordercolor, borderBottomWidth: borderwidth, color: props.isDarkMode ? props.textColor : Theme.colors.black },
+    error: { fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 5 }
   }
   return (
-    <View style={{flex: 1, width: '100%', height: '100%', position: 'absolute', zIndex: 1, backgroundColor: '#00000060'}}>
-      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 30, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
-      <View style={{flex: 1, flexDirection: 'row'}}>
-        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
-        <View style={{flex: 12, backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff'}}>
-          <View style={{flex: 1, width: '100%', backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff', padding: 15}}>
-            <View style={{padding: 10}}>
-              <Text style={{fontWeight: 'bold', fontFamily: 'Arial', fontSize: 19, color: props.isDarkMode ? props.textColor : Theme.colors.darkerGray}}>{props.title}</Text>
+    <View style={{ flex: 1, width: '100%', height: '100%', position: 'absolute', zIndex: 1, backgroundColor: '#00000060' }}>
+      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, padding: 30, width: '100%', backgroundColor: '#00000060' }}></TouchableOpacity>
+      <View style={{ flex: 1, flexDirection: 'row' }}>
+        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, backgroundColor: '#00000060' }}></TouchableOpacity>
+        <View style={{ flex: 12, backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff' }}>
+          <View style={{ flex: 1, width: '100%', backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff', padding: 15 }}>
+            <View style={{ padding: 10 }}>
+              <Text style={{ fontWeight: 'bold', fontFamily: 'Arial', fontSize: 19, color: props.isDarkMode ? props.textColor : Theme.colors.darkerGray }}>{props.title}</Text>
             </View>
-            <View style={{flex: 0.5, marginTop: 5, padding: 10}}>
+            <View style={{ flex: 0.5, marginTop: 5, padding: 10 }}>
               {props.isCustom != undefined && props.isCustom ? (
-                <View style={style.container}> 
-                  <View style={{flex: 1}}>
-                    {props.error ? <Text style={{fontSize: 12, color: Theme.colors.primary, marginBottom: 10}}>{props.title}</Text> : null }
+                <View style={style.container}>
+                  <View style={{ flex: 1 }}>
+                    {props.error ? <Text style={{ fontSize: 12, color: Theme.colors.primary, marginBottom: 10 }}>{props.title}</Text> : null}
                     <TextInput
                       ref={_textInput}
                       keyboardType={props.keyboardType || null}
-                      maxLength={props.maxlength || null} 
+                      maxLength={props.maxlength || null}
                       placeholder={props.error ? null : props.placeholder || props.title || null}
                       placeholderTextColor={props.isDarkMode ? Theme.colors.darkGray : Theme.colors.gray}
                       value={props.value || null}
                       onFocus={props.onFocus || null}
                       onChangeText={(val) => value = val}
-                      style={style.input} 
+                      style={style.input}
                     />
-                    {props.error ? <Text style={style.error}>{props.errorMessage}</Text> : null }
+                    {props.error ? <Text style={style.error}>{props.errorMessage}</Text> : null}
                   </View>
                 </View>
               ) : (
-                <TextInput 
+                <TextInput
                   onChangeText={(val) => value = val}
-                  placeholderTextColor={Theme.colors.darkGray} 
-                  placeholder={props.placeholder || ""} 
-                  style={{padding: 0, paddingTop: 15, paddingBottom: 0, fontSize:18, borderColor: 'gray', borderBottomWidth: 1, color: props.textColor}}
+                  placeholderTextColor={Theme.colors.darkGray}
+                  placeholder={props.placeholder || ""}
+                  style={{ padding: 0, paddingTop: 15, paddingBottom: 0, fontSize: 18, borderColor: 'gray', borderBottomWidth: 1, color: props.textColor }}
                 />
               )}
             </View>
             <View style={{ flex: 0.5, marginTop: 12, marginBottom: 0, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end' }}>
-              <TouchableOpacity onPress={props.onCancel} style={{padding: 10, marginRight: 5}}>
-                <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>CANCEL</Text>
+              <TouchableOpacity onPress={props.onCancel} style={{ padding: 10, marginRight: 5 }}>
+                <Text style={{ color: Theme.colors.accent, fontWeight: 'bold' }}>CANCEL</Text>
               </TouchableOpacity>
-              <TouchableOpacity onPress={() => props.onSubmit(value) } style={{padding: 10, marginLeft: 5}}>
-                <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>ADD</Text>
+              <TouchableOpacity onPress={() => props.onSubmit(value)} style={{ padding: 10, marginLeft: 5 }}>
+                <Text style={{ color: Theme.colors.accent, fontWeight: 'bold' }}>ADD</Text>
               </TouchableOpacity>
             </View>
           </View>
         </View>
-        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
+        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, backgroundColor: '#00000060' }}></TouchableOpacity>
       </View>
-      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 30, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
+      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, padding: 30, width: '100%', backgroundColor: '#00000060' }}></TouchableOpacity>
     </View>
   )
 }
 
-const confirmdialog = function(props){
-  if(!props.shown) return null;
+const confirmdialog = function (props) {
+  if (!props.shown) return null;
   let value = "";
   return (
-    <View style={{flex: 1, width: '100%', height: '100%', position: 'absolute', zIndex: 1, backgroundColor: '#00000060'}}>
-      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 30, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
-      <View style={{flex: 1, flexDirection: 'row'}}>
-        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
-        <View style={{flex: 12, backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff'}}>
-          <View style={{flex: 1, width: '100%', backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff', padding: 15}}>
-            <View style={{padding: 10}}>
-              <Text style={{fontWeight: 'bold', fontFamily: 'Arial', fontSize: 19, color: props.isDarkMode ? props.textColor : Theme.colors.darkerGray}}>{props.title}</Text>
+    <View style={{ flex: 1, width: '100%', height: '100%', position: 'absolute', zIndex: 1, backgroundColor: '#00000060' }}>
+      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, padding: 30, width: '100%', backgroundColor: '#00000060' }}></TouchableOpacity>
+      <View style={{ flex: 1, flexDirection: 'row' }}>
+        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, backgroundColor: '#00000060' }}></TouchableOpacity>
+        <View style={{ flex: 12, backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff' }}>
+          <View style={{ flex: 1, width: '100%', backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff', padding: 15 }}>
+            <View style={{ padding: 10 }}>
+              <Text style={{ fontWeight: 'bold', fontFamily: 'Arial', fontSize: 19, color: props.isDarkMode ? props.textColor : Theme.colors.darkerGray }}>{props.title}</Text>
             </View>
-            <View style={{flex: 0.5, marginTop: 5, padding: 10}}>
-              <Text style={{fontFamily: 'Arial', fontSize: 16, width: '90%', color: props.isDarkMode ? props.textColor : Theme.colors.darkGray}}>{props.message}</Text>
+            <View style={{ flex: 0.5, marginTop: 5, padding: 10 }}>
+              <Text style={{ fontFamily: 'Arial', fontSize: 16, width: '90%', color: props.isDarkMode ? props.textColor : Theme.colors.darkGray }}>{props.message}</Text>
             </View>
-            <View style={{flex: 0.5, marginTop: 12, marginBottom: 0, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
-              <TouchableOpacity onPress={props.onCancel} style={{padding: 10, marginRight: 5}}>
-                <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>CANCEL</Text>
+            <View style={{ flex: 0.5, marginTop: 12, marginBottom: 0, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end' }}>
+              <TouchableOpacity onPress={props.onCancel} style={{ padding: 10, marginRight: 5 }}>
+                <Text style={{ color: Theme.colors.accent, fontWeight: 'bold' }}>CANCEL</Text>
               </TouchableOpacity>
-              <TouchableOpacity onPress={() => props.onSubmit(value) } style={{padding: 10, marginLeft: 5}}>
-                <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>{props.buttonConfirmText || "CONFIRM"}</Text>
+              <TouchableOpacity onPress={() => props.onSubmit(value)} style={{ padding: 10, marginLeft: 5 }}>
+                <Text style={{ color: Theme.colors.accent, fontWeight: 'bold' }}>{props.buttonConfirmText || "CONFIRM"}</Text>
               </TouchableOpacity>
             </View>
           </View>
         </View>
-        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
+        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, backgroundColor: '#00000060' }}></TouchableOpacity>
       </View>
-      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 30, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
+      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, padding: 30, width: '100%', backgroundColor: '#00000060' }}></TouchableOpacity>
     </View>
   )
 }
 
-const infodialog = function(props){
-  if(!props.shown) return null;
+const infodialog = function (props) {
+  if (!props.shown) return null;
   let value = "";
   return (
-    <View style={{flex: 1, width: '100%', height: '100%', position: 'absolute', zIndex: 1, backgroundColor: '#00000060'}}>
-      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 15, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
-      <View style={{flex: 1, flexDirection: 'row'}}>
-        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
-        <View style={{flex: 12, backgroundColor: '#fff'}}>
+    <View style={{ flex: 1, width: '100%', height: '100%', position: 'absolute', zIndex: 1, backgroundColor: '#00000060' }}>
+      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, padding: 15, width: '100%', backgroundColor: '#00000060' }}></TouchableOpacity>
+      <View style={{ flex: 1, flexDirection: 'row' }}>
+        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, backgroundColor: '#00000060' }}></TouchableOpacity>
+        <View style={{ flex: 12, backgroundColor: '#fff' }}>
 
-          <View style={{width: '100%', backgroundColor: '#fff', padding: 15}}>
-            <View style={{padding: 10}}>
-              <Text style={{fontWeight: 'bold', fontFamily: 'Arial', fontSize: 19, color: Theme.colors.darkerGray}}>{props.title}</Text>
+          <View style={{ width: '100%', backgroundColor: '#fff', padding: 15 }}>
+            <View style={{ padding: 10 }}>
+              <Text style={{ fontWeight: 'bold', fontFamily: 'Arial', fontSize: 19, color: Theme.colors.darkerGray }}>{props.title}</Text>
             </View>
-            <View style={{marginTop: 5, width: '100%', padding: 5}}>
-              <Text style={{fontFamily: 'Arial', fontSize: 17, padding: 5, color: Theme.colors.darkGray}}>{props.message}</Text>
+            <View style={{ marginTop: 5, width: '100%', padding: 5 }}>
+              <Text style={{ fontFamily: 'Arial', fontSize: 17, padding: 5, color: Theme.colors.darkGray }}>{props.message}</Text>
             </View>
-            <View style={{ marginTop: 15, marginBottom: 0, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
-              <TouchableOpacity onPress={() => props.onSubmit(value) } style={{padding: 10, marginLeft: 0}}>
-                <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>{props.buttonConfirmText || "OK"}</Text>
+            <View style={{ marginTop: 15, marginBottom: 0, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end' }}>
+              <TouchableOpacity onPress={() => props.onSubmit(value)} style={{ padding: 10, marginLeft: 0 }}>
+                <Text style={{ color: Theme.colors.accent, fontWeight: 'bold' }}>{props.buttonConfirmText || "OK"}</Text>
               </TouchableOpacity>
             </View>
           </View>
 
         </View>
-        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
+        <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, backgroundColor: '#00000060' }}></TouchableOpacity>
       </View>
-      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 15, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
+      <TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{ flex: 1, padding: 15, width: '100%', backgroundColor: '#00000060' }}></TouchableOpacity>
     </View>
   )
 }
 
-const datepicker = function(props){
-  if(!props.shown) return null;
+const datepicker = function (props) {
+  if (!props.shown) return null;
 
-  if(Platform.OS == 'ios'){
+  if (Platform.OS == 'ios') {
     return <datepickerIOS props />
   }
 
@@ -594,13 +594,13 @@ const datepicker = function(props){
       mode={"date"}
       is24Hour={true}
       display="spinner"
-      style={{width:'100%'}}
+      style={{ width: '100%' }}
       onChange={(event, selectedDate) => props.onChange(selectedDate ? moment(selectedDate).format(props.returnFormat) : props.value != null ? props.value : null)}
     />
   )
 }
 
-const datepickerIOS = function(props){
+const datepickerIOS = function (props) {
   return (
     <Modal
       animationType="none"
@@ -608,34 +608,34 @@ const datepickerIOS = function(props){
       visible={props.shown}
     >
       <TouchableOpacity style={styles.centeredView}>
-        <TouchableOpacity activeOpacity={1} style={{...styles.modalView, width: '100%', ...props.style || {}}}>
-        <DateTimePicker
-          testID={props.id}
-          timeZoneOffsetInMinutes={0}
-          value={props.value != null ? new Date(props.value) : null || new Date("Jan 01 1990")}
-          mode={"date"}
-          is24Hour={true}
-          display="spinner"
-          style={{flex: 1}}
-          onChange={(event, selectedDate) => props.onChange(selectedDate ? moment(selectedDate).format(props.returnFormat) : props.value != null ? props.value : null)}
-        />
+        <TouchableOpacity activeOpacity={1} style={{ ...styles.modalView, width: '100%', ...props.style || {} }}>
+          <DateTimePicker
+            testID={props.id}
+            timeZoneOffsetInMinutes={0}
+            value={props.value != null ? new Date(props.value) : null || new Date("Jan 01 1990")}
+            mode={"date"}
+            is24Hour={true}
+            display="spinner"
+            style={{ flex: 1 }}
+            onChange={(event, selectedDate) => props.onChange(selectedDate ? moment(selectedDate).format(props.returnFormat) : props.value != null ? props.value : null)}
+          />
         </TouchableOpacity>
       </TouchableOpacity>
     </Modal>
   )
 }
 
-const nointernet = function(props){
+const nointernet = function (props) {
   return (
-    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', top: Platform.OS == 'ios' ? 50 : 0}}>
-      <Text style={{padding: 10, fontSize: 16, textAlign: 'center', bottom: Platform.OS == 'ios' ? 50 : 0}}>{props.message}</Text>
-      <TouchableOpacity onPress={props.onPress} style={{backgroundColor: Theme.colors.primary, borderRadius: 10, padding: 14.5, paddingHorizontal: 35, bottom: Platform.OS == 'ios' ? 50 : 0}}>
-        <Text style={{color: "#fff", fontSize: 16}}>{props.buttonText}</Text>
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', top: Platform.OS == 'ios' ? 50 : 0 }}>
+      <Text style={{ padding: 10, fontSize: 16, textAlign: 'center', bottom: Platform.OS == 'ios' ? 50 : 0 }}>{props.message}</Text>
+      <TouchableOpacity onPress={props.onPress} style={{ backgroundColor: Theme.colors.primary, borderRadius: 10, padding: 14.5, paddingHorizontal: 35, bottom: Platform.OS == 'ios' ? 50 : 0 }}>
+        <Text style={{ color: "#fff", fontSize: 16 }}>{props.buttonText}</Text>
       </TouchableOpacity>
     </View>)
 }
 
-const infomodaldialog = function(props){
+const infomodaldialog = function (props) {
   return (
     <Modal
       animationType="none"
@@ -643,16 +643,16 @@ const infomodaldialog = function(props){
       visible={props.visible}
     >
       <TouchableOpacity onPress={props.onClose} style={styles.centeredView}>
-        <TouchableOpacity activeOpacity={1} style={{...styles.modalView, ...props.style || {}}}>
+        <TouchableOpacity activeOpacity={1} style={{ ...styles.modalView, ...props.style || {} }}>
           <Text style={styles.modalTitle}>{props.title}</Text>
           <Text style={styles.modalText}>{props.message}</Text>
-          <View style={{flexDirection: 'row', marginTop: 30}}>
-            <View style={{flex: 3}}></View>
-            <TouchableOpacity style={{flex: 2, padding: 5}}>
-              <Text style={{textAlign: 'right', fontWeight: 'bold', color: Theme.colors.accent}}></Text>
+          <View style={{ flexDirection: 'row', marginTop: 30 }}>
+            <View style={{ flex: 3 }}></View>
+            <TouchableOpacity style={{ flex: 2, padding: 5 }}>
+              <Text style={{ textAlign: 'right', fontWeight: 'bold', color: Theme.colors.accent }}></Text>
             </TouchableOpacity>
-            <TouchableOpacity onPress={props.onClose} style={{flex: 1, padding: 5}}>
-              <Text style={{textAlign: 'center', fontWeight: 'bold', color: Theme.colors.accent}}>OK</Text>
+            <TouchableOpacity onPress={props.onClose} style={{ flex: 1, padding: 5 }}>
+              <Text style={{ textAlign: 'center', fontWeight: 'bold', color: Theme.colors.accent }}>OK</Text>
             </TouchableOpacity>
           </View>
         </TouchableOpacity>
@@ -661,14 +661,14 @@ const infomodaldialog = function(props){
   )
 }
 
-const popup = function(props){
+const popup = function (props) {
   return props.visible ?
-    <View style={{position: 'absolute', zIndex: 100, width: '100%', padding: 15, bottom: 0, backgroundColor: Theme.colors.darkerGray}}>
-      <Text style={{padding: 0, color: "#fff"}}>{props.message}</Text>
+    <View style={{ position: 'absolute', zIndex: 100, width: '100%', padding: 15, bottom: 0, backgroundColor: Theme.colors.darkerGray }}>
+      <Text style={{ padding: 0, color: "#fff" }}>{props.message}</Text>
     </View> : null
 }
 
-const loader = function(props){
+const loader = function (props) {
   return (
     <Modal
       ref={props.ref || null}
@@ -677,14 +677,14 @@ const loader = function(props){
       visible={props.visible}
     >
       <View style={styles.centeredView}>
-        <View style={{...styles.modalView, width: '100%', ...props.style || {}}}>
-          <Text style={{...styles.modalTitle, fontSize: 20}}>{props.title || "Connecting"}</Text>
-          <View style={{flexDirection: 'row', marginTop: 5}}>
-            <View style={{flex: 1.3, justifyContent: 'center', alignItems: 'center'}}>
+        <View style={{ ...styles.modalView, width: '100%', ...props.style || {} }}>
+          <Text style={{ ...styles.modalTitle, fontSize: 20 }}>{props.title || "Connecting"}</Text>
+          <View style={{ flexDirection: 'row', marginTop: 5 }}>
+            <View style={{ flex: 1.3, justifyContent: 'center', alignItems: 'center' }}>
               <ActivityIndicator size={50} color={Theme.colors.primary} />
             </View>
-            <View style={{flex: 4}}>
-              <Text style={{...styles.modalText}}>{props.message || "Please wait, connecting to server..."}</Text>
+            <View style={{ flex: 4 }}>
+              <Text style={{ ...styles.modalText }}>{props.message || "Please wait, connecting to server..."}</Text>
             </View>
           </View>
         </View>
@@ -693,21 +693,21 @@ const loader = function(props){
   )
 }
 
-const loaderView = function(props){
+const loaderView = function (props) {
   return (
     <Modal
       animationType="none"
       transparent={true}
       visible={props.visible}>
       <View style={styles.centeredView}>
-        <View style={[{...styles.modalView, width: '100%', ...props.style || {}}, { backgroundColor: props.isDarkMode ? props.backgroundColor : Theme.colors.white }]}>
-          <Text style={{...styles.modalTitle, fontSize: 20, color: props.color}}>{props.title || "Validating"}</Text>
-          <View style={{flexDirection: 'row', marginTop: 5}}>
-            <View style={{flex: 1.3, justifyContent: 'center', alignItems: 'center'}}>
+        <View style={[{ ...styles.modalView, width: '100%', ...props.style || {} }, { backgroundColor: props.isDarkMode ? props.backgroundColor : Theme.colors.white }]}>
+          <Text style={{ ...styles.modalTitle, fontSize: 20, color: props.color }}>{props.title || "Validating"}</Text>
+          <View style={{ flexDirection: 'row', marginTop: 5 }}>
+            <View style={{ flex: 1.3, justifyContent: 'center', alignItems: 'center' }}>
               <ActivityIndicator size={50} color={Theme.colors.primary} />
             </View>
-            <View style={{flex: 4}}>
-              <Text style={[{...styles.modalText}, { color: props.color}]}>{props.message || "Please wait..."}</Text>
+            <View style={{ flex: 4 }}>
+              <Text style={[{ ...styles.modalText }, { color: props.color }]}>{props.message || "Please wait..."}</Text>
             </View>
           </View>
         </View>
@@ -716,7 +716,7 @@ const loaderView = function(props){
   )
 }
 
-const logoutdialog = function(props){
+const logoutdialog = function (props) {
   return (
     <Modal
       animationType="none"
@@ -724,16 +724,16 @@ const logoutdialog = function(props){
       visible={props.visible}
     >
       <TouchableOpacity onPress={props.onClose} style={styles.centeredView}>
-        <TouchableOpacity activeOpacity={1} style={{...styles.modalView, ...props.style || {}}}>
+        <TouchableOpacity activeOpacity={1} style={{ ...styles.modalView, ...props.style || {} }}>
           <Text style={styles.modalTitle}>{props.title}</Text>
           <Text style={styles.modalText}>{props.message}</Text>
-          <View style={{flexDirection: 'row', marginTop: 30}}>
-            <View style={{flex: 3}}></View>
-            <TouchableOpacity onPress={props.onClose} style={{flex: 2, padding: 5}}>
-              <Text style={{textAlign: 'right', fontWeight: 'bold', color: Theme.colors.accent}}>CANCEL</Text>
+          <View style={{ flexDirection: 'row', marginTop: 30 }}>
+            <View style={{ flex: 3 }}></View>
+            <TouchableOpacity onPress={props.onClose} style={{ flex: 2, padding: 5 }}>
+              <Text style={{ textAlign: 'right', fontWeight: 'bold', color: Theme.colors.accent }}>CANCEL</Text>
             </TouchableOpacity>
-            <TouchableOpacity onPress={props.onSubmit} style={{flex: 1, padding: 5}}>
-              <Text style={{textAlign: 'center', fontWeight: 'bold', color: Theme.colors.accent}}>OK</Text>
+            <TouchableOpacity onPress={props.onSubmit} style={{ flex: 1, padding: 5 }}>
+              <Text style={{ textAlign: 'center', fontWeight: 'bold', color: Theme.colors.accent }}>OK</Text>
             </TouchableOpacity>
           </View>
         </TouchableOpacity>
@@ -746,10 +746,10 @@ const nointernet2 = (props, buttons) => {
   Alert.alert("Information", "\nSlow or no internet connection. Please check your internet connection.", buttons)
 }
 
-const customAlert = function(props) {
+const customAlert = function (props) {
   const dispatch = useDispatch();
-  
-  const { 
+
+  const {
     open,
     yesCB,
     noCB,
@@ -764,8 +764,8 @@ const customAlert = function(props) {
     backdropCancellable
   } = props;
 
-  if(!open) return null;
-  
+  if (!open) return null;
+
   const onPressNo = () => {
     noCB?.();
     dispatch(closeModal());
@@ -777,54 +777,131 @@ const customAlert = function(props) {
   }
 
   return (
-    <TouchableOpacity activeOpacity={1} onPress={!backdropCancellable ? () => {} : onPressNo} style={{
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      justifyContent: 'center',
-      backgroundColor: 'rgba(0,0,0,.5)',
-      paddingHorizontal: 25
-    }}>
-      <TouchableOpacity activeOpacity={1} onPress={null} style= {{
-        backgroundColor: theme?.theme.dark ? theme.theme.colors.border : 'white',
-        zIndex: 10,
-        borderRadius: 10,
-        alignItems: 'center'
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={!backdropCancellable ? () => { } : onPressNo}
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0,0,0,.5)',
+        paddingHorizontal: 25
       }}>
-        {
-          children ?
-            children
-            :
-            <>
-              <Text style={{color: theme?.theme.dark ? theme?.theme.colors.text : "black", fontWeight: 'bold', fontSize: 18, marginTop: 18, marginBottom: 19}}>{title}</Text>
-              <Text style={{color: theme?.theme.dark ? theme?.theme.colors.text : "black", paddingHorizontal: 15, textAlign: 'center', fontSize: 18, marginBottom: 35}}>{body}</Text>
 
-              <View style={{flexDirection: 'row', paddingHorizontal: 31, marginBottom: 18}}>
-                { !yesButtonOnly && <TouchableOpacity onPress={onPressNo} style={{flex: 1, borderWidth: 1, borderColor: Theme.colors.primary, alignItems: 'center', paddingVertical: 6, marginRight: 6, borderRadius: 5}}><Text style={{fontWeight: 'bold', color: Theme.colors.primary, fontSize: 17}}>{noText ? noText : "Cancel"}</Text></TouchableOpacity> }
-                { !noButtonOnly && <TouchableOpacity onPress={onPressYes} style={{flex: 1, backgroundColor: Theme.colors.primary, alignItems: 'center', paddingVertical: 6, marginLeft: 6, borderRadius: 5}}><Text style={{fontWeight: 'bold', color: 'white', fontSize: 17}}>{yesText ? yesText : "Yes"}</Text></TouchableOpacity> }
-              </View>
-            </>
-        }
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={null}
+        style={{
+          backgroundColor: theme?.theme.dark ? theme.theme.colors.border : 'white',
+          zIndex: 10,
+          borderRadius: 10,
+          alignItems: 'center',
+          overflow: 'hidden', 
+          height: 500  
+        }}>
+
+        {/* Image in the top half */}
+        <View style={{ flex: 1 }}>
+          <Image
+            source={Assets.bg.modal_bg}  
+            style={{
+              height: '100%',
+              resizeMode: 'contain',  
+            }}
+          />
+        </View>
+
+        {/* Text in the bottom half */}
+        <View style={{
+          // flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingHorizontal: 15,
+        }}>
+          {
+            children ?
+              children :
+              <>
+                <Text
+                  style={{
+                    color: theme?.theme.dark ? theme?.theme.colors.text : "black",
+                    fontWeight: 'bold',
+                    fontSize: 18,
+                    marginTop: 18,
+                    marginBottom: 19
+                  }}>
+                  {title}
+                </Text>
+                <Text
+                  style={{
+                    color: theme?.theme.dark ? theme?.theme.colors.text : "black",
+                    textAlign: 'center',
+                    fontSize: 16,
+                    marginBottom: 35
+                  }}>
+                  {body}
+                </Text>
+
+                <View style={{ flexDirection: 'row', paddingHorizontal: 31, marginBottom: 18 }}>
+                  {!yesButtonOnly &&
+                    <TouchableOpacity
+                      onPress={onPressNo}
+                      style={{
+                        flex: 1,
+                        borderWidth: 1,
+                        borderColor: Theme.colors.primary,
+                        alignItems: 'center',
+                        paddingVertical: 6,
+                        marginRight: 6,
+                        borderRadius: 5
+                      }}>
+                      <Text style={{ fontWeight: 'bold', color: Theme.colors.primary, fontSize: 17 }}>
+                        {noText ? noText : "Cancel"}
+                      </Text>
+                    </TouchableOpacity>
+                  }
+                  {!noButtonOnly &&
+                    <TouchableOpacity
+                      onPress={onPressYes}
+                      style={{
+                        flex: 1,
+                        backgroundColor: Theme.colors.primary,
+                        alignItems: 'center',
+                        paddingVertical: 6,
+                        marginLeft: 6,
+                        borderRadius: 5
+                      }}>
+                      <Text style={{ fontWeight: 'bold', color: 'white', fontSize: 17 }}>
+                        {yesText ? yesText : "Yes"}
+                      </Text>
+                    </TouchableOpacity>
+                  }
+                </View>
+              </>
+          }
+        </View>
+
       </TouchableOpacity>
-
     </TouchableOpacity>
+
   )
 }
 
-const bottomselectmodal = function(props){
+const bottomselectmodal = function (props) {
   let color = Theme.colors.textPrimary
   let items = props.items || []
   const renderContent = () => {
     return items.map((data, index) => {
       return (
-        <TouchableOpacity onPress={data.onPress || null} key={index} style={{flexDirection: 'row', paddingBottom: index < items.length - 1 ? 30 : 0, bottom: Platform.OS == 'ios' ? 15 : 0,}}>
-          {data.icon ? 
-          <Text style={{flex: 0.4}}>
-            <CustomIcon.MaterialCommunityIcons name={data.icon} size={25} color="#00000095" />
-          </Text> : null}          
-          <Text style={{flex: 3, color: color, fontSize: 14, padding: 5}}>{data.label}</Text>
+        <TouchableOpacity onPress={data.onPress || null} key={index} style={{ flexDirection: 'row', paddingBottom: index < items.length - 1 ? 30 : 0, bottom: Platform.OS == 'ios' ? 15 : 0, }}>
+          {data.icon ?
+            <Text style={{ flex: 0.4 }}>
+              <CustomIcon.MaterialCommunityIcons name={data.icon} size={25} color="#00000095" />
+            </Text> : null}
+          <Text style={{ flex: 3, color: color, fontSize: 14, padding: 5 }}>{data.label}</Text>
         </TouchableOpacity>
       )
     })
@@ -837,8 +914,8 @@ const bottomselectmodal = function(props){
       visible={props.visible}
     >
       <TouchableOpacity onPress={props.onClose} style={styles.bottomView}>
-        <TouchableOpacity activeOpacity={1} style={{...styles.modalView, width: '100%', padding: 30, paddingHorizontal: 20, ...props.style || {}}}>
-          <View style={{flexDirection: 'column'}}>
+        <TouchableOpacity activeOpacity={1} style={{ ...styles.modalView, width: '100%', padding: 30, paddingHorizontal: 20, ...props.style || {} }}>
+          <View style={{ flexDirection: 'column' }}>
             {renderContent()}
           </View>
         </TouchableOpacity>
@@ -847,30 +924,30 @@ const bottomselectmodal = function(props){
   )
 }
 
-const promoGPS = function(props){
+const promoGPS = function (props) {
   return (
     <Modal
       animationType="none"
       transparent={true}
       visible={props.visible}>
       <TouchableOpacity onPress={props.onDismiss} style={styles.centeredView}>
-        <TouchableOpacity activeOpacity={1} style={{...styles.modalView, ...props.style || {}, padding: 0}}>
-          <Image 
-            source={props.image} 
-            style={{width: Theme.screen.w - 60, height: Theme.screen.h / 3.5, resizeMode: "stretch"}}
+        <TouchableOpacity activeOpacity={1} style={{ ...styles.modalView, ...props.style || {}, padding: 0 }}>
+          <Image
+            source={props.image}
+            style={{ width: Theme.screen.w - 60, height: Theme.screen.h / 3.5, resizeMode: "stretch" }}
           />
-          <View style={{padding: 20}}>
-            <Text style={{fontSize: 16, fontWeight: 'bold', fontFamily: 'arial', color: Theme.colors.accent}}>
+          <View style={{ padding: 20 }}>
+            <Text style={{ fontSize: 16, fontWeight: 'bold', fontFamily: 'arial', color: Theme.colors.accent }}>
               {props.title}
             </Text>
           </View>
-          <View style={{flexDirection: 'row', padding: 20, paddingTop: 15}}>
-            <View style={{flex: 1}}></View>
-            <TouchableOpacity onPress={props.onDismiss} activeOpacity={1} style={{flex: 1}}>
-              <Text style={{color: Theme.colors.accent, fontWeight: 'normal', fontFamily: 'arial'}}>DISMISS</Text>
+          <View style={{ flexDirection: 'row', padding: 20, paddingTop: 15 }}>
+            <View style={{ flex: 1 }}></View>
+            <TouchableOpacity onPress={props.onDismiss} activeOpacity={1} style={{ flex: 1 }}>
+              <Text style={{ color: Theme.colors.accent, fontWeight: 'normal', fontFamily: 'arial' }}>DISMISS</Text>
             </TouchableOpacity>
-            <TouchableOpacity onPress={props.onOpen} activeOpacity={1} style={{flex: 1}}>
-              <Text style={{color: Theme.colors.accent, fontWeight: 'normal', fontFamily: 'arial'}}>SEE DETAILS</Text>
+            <TouchableOpacity onPress={props.onOpen} activeOpacity={1} style={{ flex: 1 }}>
+              <Text style={{ color: Theme.colors.accent, fontWeight: 'normal', fontFamily: 'arial' }}>SEE DETAILS</Text>
             </TouchableOpacity>
           </View>
         </TouchableOpacity>
@@ -879,7 +956,7 @@ const promoGPS = function(props){
   )
 }
 
-const notification = function(props){
+const notification = function (props) {
   return (
     <Modal
       animationType="none"
@@ -888,25 +965,25 @@ const notification = function(props){
       onRequestClose={props.onDismiss}>
       <TouchableOpacity activeOpacity={1} onPress={props.onDismiss} style={styles.centeredView}>
         <TouchableOpacity activeOpacity={1} style={{
-          ...styles.modalView, 
+          ...styles.modalView,
           ...props.style || {},
-          padding: 0, 
+          padding: 0,
           width: Theme.screen.w - 60,
           borderRadius: 10
-          }}>
-          <View style={{padding: 20}}>
-            <Text style={{fontSize: 18, fontWeight: 'bold', textAlign: 'left', fontFamily: 'arial', color: Theme.colors.textPrimary}}>
+        }}>
+          <View style={{ padding: 20 }}>
+            <Text style={{ fontSize: 18, fontWeight: 'bold', textAlign: 'left', fontFamily: 'arial', color: Theme.colors.textPrimary }}>
               {props.title}
             </Text>
           </View>
-          <View style={{padding: 20, marginBottom: 20 }}>
-            <Text style={{fontSize: 16, fontWeight: 'normal', textAlign: 'center', fontFamily: 'arial', color: Theme.colors.primary}}>
+          <View style={{ padding: 20, marginBottom: 20 }}>
+            <Text style={{ fontSize: 16, fontWeight: 'normal', textAlign: 'center', fontFamily: 'arial', color: Theme.colors.primary }}>
               {props.message}
             </Text>
           </View>
-          <TouchableOpacity onPress={props.onClose} activeOpacity={0.5} style={{padding: 15, height: 50, alignItems: 'center', backgroundColor: Theme.colors.primary, borderBottomLeftRadius: 10, borderBottomRightRadius: 10}}>
-            <View style={{flex: 1, padding: 0}}>
-              <Text style={{color: "#fff", fontWeight: 'normal', fontFamily: 'arial'}}>CLOSE</Text>
+          <TouchableOpacity onPress={props.onClose} activeOpacity={0.5} style={{ padding: 15, height: 50, alignItems: 'center', backgroundColor: Theme.colors.primary, borderBottomLeftRadius: 10, borderBottomRightRadius: 10 }}>
+            <View style={{ flex: 1, padding: 0 }}>
+              <Text style={{ color: "#fff", fontWeight: 'normal', fontFamily: 'arial' }}>CLOSE</Text>
             </View>
           </TouchableOpacity>
         </TouchableOpacity>
@@ -922,52 +999,52 @@ const CustomDatePicker = (props) => {
   const [currentDate, setCurrentDate] = useState(props.date || new Date(newYear, 0, 1));
 
   let version = parseInt(Platform.Version, 10)
-  if(version >= 13) {
+  if (version >= 13) {
     return (
       <Modal
         animationType="none"
         transparent={true}
         visible={props.visible}>
         <TouchableOpacity activeOpacity={1} onPress={() => { props.onCancel() }} style={styles.centeredView}>
-            <View style={{
-              margin: 25,
-              backgroundColor: props?.isDarkMode ? props?.modalBackgroundColor : Theme.colors.white,
-              borderRadius: 15,
-              padding: 20,
-              alignItems: "center",
-              shadowColor: "#000",
-              shadowOffset: {
-                width: 0,
-                height: 2
-              },
-              shadowOpacity: 0.25,
-              shadowRadius: 4,
-              elevation: 5
-              }}>
-              <DatePicker
-                androidVariant = 'nativeAndroid'
-                date={props.showDate ? undefined : currentDate} 
-                maximumDate={new Date()}
-                mode='date'
-                onDateChange={(date) => { setCurrentDate(date) }}
-                fadeToColor={Theme.colors.lightGray}
-                textColor={props?.isDarkMode ? props?.textColor : Theme.colors.black}
-              />
-              <View style={{ flexDirection: 'row', alignSelf: 'flex-end' }}>
-                <TouchableOpacity
-                  style={{ paddingHorizontal: 10, height: 30, alignItems: 'center', justifyContent: 'center', borderRadius: 5, margin: 5 }}
-                  onPress={() => { props.onCancel() }}>
-                      <Text style={{ color: props?.isDarkMode ? Theme.colors.white : Theme.colors.black, fontFamily: 'arial', fontSize: 18 }}>CANCEL</Text>
-                  </TouchableOpacity>
-                <TouchableOpacity
-                  style={{ paddingHorizontal: 5, height: 30, alignItems: 'center', justifyContent: 'center', borderRadius: 5, margin: 5 }}
-                  onPress={() => { props.onConfirm(currentDate) }}>
-                      <Text style={{ color: props?.isDarkMode ? Theme.colors.white : Theme.colors.black, fontFamily: 'arial', fontSize: 18 }}>OK</Text>
-                  </TouchableOpacity>
-              </View>
+          <View style={{
+            margin: 25,
+            backgroundColor: props?.isDarkMode ? props?.modalBackgroundColor : Theme.colors.white,
+            borderRadius: 15,
+            padding: 20,
+            alignItems: "center",
+            shadowColor: "#000",
+            shadowOffset: {
+              width: 0,
+              height: 2
+            },
+            shadowOpacity: 0.25,
+            shadowRadius: 4,
+            elevation: 5
+          }}>
+            <DatePicker
+              androidVariant='nativeAndroid'
+              date={props.showDate ? undefined : currentDate}
+              maximumDate={new Date()}
+              mode='date'
+              onDateChange={(date) => { setCurrentDate(date) }}
+              fadeToColor={Theme.colors.lightGray}
+              textColor={props?.isDarkMode ? props?.textColor : Theme.colors.black}
+            />
+            <View style={{ flexDirection: 'row', alignSelf: 'flex-end' }}>
+              <TouchableOpacity
+                style={{ paddingHorizontal: 10, height: 30, alignItems: 'center', justifyContent: 'center', borderRadius: 5, margin: 5 }}
+                onPress={() => { props.onCancel() }}>
+                <Text style={{ color: props?.isDarkMode ? Theme.colors.white : Theme.colors.black, fontFamily: 'arial', fontSize: 18 }}>CANCEL</Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={{ paddingHorizontal: 5, height: 30, alignItems: 'center', justifyContent: 'center', borderRadius: 5, margin: 5 }}
+                onPress={() => { props.onConfirm(currentDate) }}>
+                <Text style={{ color: props?.isDarkMode ? Theme.colors.white : Theme.colors.black, fontFamily: 'arial', fontSize: 18 }}>OK</Text>
+              </TouchableOpacity>
             </View>
+          </View>
         </TouchableOpacity>
-    </Modal>
+      </Modal>
     )
   } else {
     var pickerRef = useRef()
@@ -981,20 +1058,20 @@ const CustomDatePicker = (props) => {
       confirmTextIOS="Ok"
       onConfirm={props.onConfirm}
       onCancel={props.onCancel}
-      modalStyleIOS={{justifyContent: 'center'}}
-      pickerContainerStyleIOS={{borderRadius: 0}}
+      modalStyleIOS={{ justifyContent: 'center' }}
+      pickerContainerStyleIOS={{ borderRadius: 0 }}
       customHeaderIOS={() => null}
       customConfirmButtonIOS={() => {
         return (
-          <View style={{ padding: 15, marginBottom: 0, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
-          <TouchableOpacity onPress={() => props.onCancel()} style={{padding: 10, marginRight: 5}}>
-            <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>CANCEL</Text>
-          </TouchableOpacity>
-          <TouchableOpacity onPress={() => {
-            props.onConfirm(pickerRef.state.currentDate)
-          }} style={{padding: 10, marginLeft: 5}}>
-            <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>OK</Text>
-          </TouchableOpacity>
+          <View style={{ padding: 15, marginBottom: 0, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end' }}>
+            <TouchableOpacity onPress={() => props.onCancel()} style={{ padding: 10, marginRight: 5 }}>
+              <Text style={{ color: Theme.colors.accent, fontWeight: 'bold' }}>CANCEL</Text>
+            </TouchableOpacity>
+            <TouchableOpacity onPress={() => {
+              props.onConfirm(pickerRef.state.currentDate)
+            }} style={{ padding: 10, marginLeft: 5 }}>
+              <Text style={{ color: Theme.colors.accent, fontWeight: 'bold' }}>OK</Text>
+            </TouchableOpacity>
           </View>
         )
       }}
@@ -1004,7 +1081,7 @@ const CustomDatePicker = (props) => {
 }
 
 const CustomMonthPicker = (props) => {
-  if(!props.visible) return null  
+  if (!props.visible) return null
   return <MonthPicker
     value={new Date()}
     minimumDate={new Date()}
@@ -1020,8 +1097,8 @@ const ActionOption = (props) => {
     <Actionsheet isOpen={props.open} onClose={props.onClose}>
       <Actionsheet.Content>
         {props.buttons.map(item => (
-          <Actionsheet.Item key={item.key} onPress={item.onPress}> 
-              <Text>{item.name}</Text>
+          <Actionsheet.Item key={item.key} onPress={item.onPress}>
+            <Text>{item.name}</Text>
           </Actionsheet.Item>
         ))}
       </Actionsheet.Content>