Add component automatic debit

Endurance-Soft · Mar 8, 2024 · 3eb82fa · 3eb82fa
1 parent e926769
commit 3eb82fa
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 29 deletions.
diff --git a/constants.js b/constants.js
@@ -43,16 +43,7 @@ export const DATA = [
     balance: "4670 Bs.",
     pendingNotes: "5",
     lastPayment: "10/03/22",
-  },
-  {
-    id: 6,
-    icon: "person-circle",
-    name: "Samuel Herbas",
-    code: "11020102001006",
-    balance: "1500 Bs.",
-    pendingNotes: "5",
-    lastPayment: "14/03/22",
-  },
+  }
 ];
 export const theme = {
   colors: {

diff --git a/src/components/ClientDebit.js b/src/components/ClientDebit.js
@@ -21,13 +21,13 @@ const ClientDebit = ({clientInfo}) => {
 
     return(
         <View style={clientDebitStyles.container}>
-            <Text> {totalDebit} Bs</Text>
+            <Text style={clientDebitStyles.text}> {totalDebit} Bs</Text>
             <View style={clientDebitStyles.spaceButtons}>
                 <TouchableOpacity onPress={()=>{}} style={clientDebitStyles.button}>
-                    <Text>Automático</Text>
+                    <Text style={clientDebitStyles.textButton}>Automático</Text>
                 </TouchableOpacity>
                 <TouchableOpacity onPress={()=>{}} style={clientDebitStyles.button}>
-                    <Text style={color='white'}>Imprimir</Text>
+                    <Text style={clientDebitStyles.textButton}>Recibo</Text>
                 </TouchableOpacity>
             </View>
         </View>

diff --git a/src/components/styles/ClientDebitStyles.js b/src/components/styles/ClientDebitStyles.js
@@ -1 +1,36 @@
-//clientDebitStyles
+//clientDebitStyles
+import { StyleSheet } from 'react-native';
+import { theme } from '../../../constants';
+
+export const clientDebitStyles = StyleSheet.create({
+    container: {
+        backgroundColor: theme.colors.skyBlue,
+        borderRadius:22,
+        alignItems: 'center',
+        padding: 10,
+        width: '90%',
+        alignSelf: 'center',
+        display: 'flex',
+    },
+    spaceButtons: {
+        flexDirection: 'row',
+        alignContent: 'space-between',
+        gap: 15,
+        marginTop: 20,
+    },
+    text: {
+        fontSize: 36,
+        fontWeight: 'bold',
+    },
+    button:{
+        paddingHorizontal: 30,
+        backgroundColor: theme.colors.tertiary,
+        borderRadius: 22,
+        padding: 10,
+    },
+    textButton:{
+        color: theme.colors.primary,
+        fontSize:20,
+        fontWeight: '500',
+    }
+})
diff --git a/src/screens/ClientPaymentScreen.js b/src/screens/ClientPaymentScreen.js
@@ -14,20 +14,22 @@ const ClientPaymentScreen = ({ route }) => {
   const client = DATA.find((item) => item.id == clientId);
   return (
     <SafeAreaView style={styles.container}>
-      <View style={styles.header}>
-        <TouchableOpacity style={styles.back} onPress={() => navigation.goBack()}>
-          <Icon name="back" size={30} color="black" />
-        </TouchableOpacity>
-        <View style={styles.headerCenter}>
-          <View style={styles.text}>
-            <Text style={styles.code}>{client.code}</Text>
-            <Text style={styles.name}>{client.name}</Text>
+      <View style={styles.headerWithoutComponents}>
+        <View style={styles.header}>
+          <TouchableOpacity style={styles.back} onPress={() => navigation.goBack()}>
+            <Icon name="back" size={30} color="black" />
+          </TouchableOpacity>
+          <View style={styles.headerCenter}>
+            <View style={styles.text}>
+              <Text style={styles.code}>{client.code}</Text>
+              <Text style={styles.name}>{client.name}</Text>
+            </View>
           </View>
-          <ClientDebit 
-            clientInfo = {client}
-          /> 
+
         </View>
-
+        <ClientDebit
+            clientInfo={client}
+          />
       </View>
     </SafeAreaView>
   )
@@ -39,13 +41,15 @@ const styles = StyleSheet.create({
     paddingTop: 15,
     backgroundColor: theme.colors.primary,
   },
-  header: {
+  headerWithoutComponents: {
     zIndex: 1,
     backgroundColor: theme.colors.secondary,
     borderBottomLeftRadius: 22,
     borderBottomRightRadius: 22,
     elevation: 7,
-    paddingVertical: 20,
+  },
+  header: {
+    paddingTop: 20,
     paddingHorizontal: 20,
     flexDirection: 'row',
   },
@@ -60,7 +64,7 @@ const styles = StyleSheet.create({
   headerCenter: {
     alignItems: 'center',
   },
-  text:{
+  text: {
     alignItems: 'center',
     padding: 20,
   },