feat(invoice): BillScreen

Endurance-Soft · Mar 7, 2024 · af16954 · af16954
1 parent e9da657
commit af16954
Show file tree

Hide file tree

Showing 2 changed files with 171 additions and 26 deletions.
diff --git a/AppNavigator.js b/AppNavigator.js
@@ -1,37 +1,64 @@
 import React from 'react';
-import { Easing } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { NavigationContainer } from '@react-navigation/native';
 import NewScreen from './src/screens/HomeScreen';
 import ClientSearchScreen from './src/screens/ClientSearchScreen';
 import BillScreen from './src/screens/BillScreen'
-
+import { Animated, Easing } from 'react-native';
 const Stack = createNativeStackNavigator();
 
 function AppNavigator() {
   return (
     <NavigationContainer>
-      {/* <Stack.Navigator initialRouteName="NewScreen" > */}
-      <Stack.Navigator initialRouteName="BillScreen" >
+      <Stack.Navigator
+      screenOptions={{
+        cardStyleInterpolator: ({current, layouts}) => {
+          return {
+            cardStyle: {
+              opacity: current.progress,
+              transform: [
+                {
+                  translateY: current.progress.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [layouts.screen.height * 0.3, 0],
+                  }),
+                },
+              ],
+            },
+          };
+        },
+        transitionSpec: {
+          open: {
+            animation: 'timing',
+            config: {
+              duration: 150,
+              easing: Easing.ease,
+            },
+          },
+          close: {
+            animation: 'timing',
+            config: {
+              duration: 150,
+              easing: Easing.ease,
+            },
+          },
+        },
+      }}
+      >
         <Stack.Screen 
-            name="NewScreen" 
-            component={NewScreen} 
-            options={{ 
-                headerShown: false,
-            }} />
+          name="NewScreen" 
+          component={NewScreen} 
+          options={{ headerShown: false }} 
+        />
         <Stack.Screen 
-            name="ClientSearchScreen" 
-            component={ClientSearchScreen} 
-            options={{
-                headerShown: false,
-            }} 
+          name="ClientSearchScreen" 
+          component={ClientSearchScreen} 
+          options={{ headerShown: false }} 
         />
         <Stack.Screen 
-            name="BillScreen" 
-            component={BillScreen} 
-            options={{
-                headerShown: false,
-            }} 
+          name="BillScreen" 
+          component={BillScreen} 
+          options={{ headerShown: false }} 
         />
       </Stack.Navigator>
     </NavigationContainer>

diff --git a/src/screens/BillScreen.js b/src/screens/BillScreen.js
@@ -6,20 +6,71 @@ const screenWidth = Dimensions.get('window').width;
 import Icon from 'react-native-vector-icons/AntDesign';
 import { DATA, theme } from '../../constants'
 import { useNavigation } from '@react-navigation/native';
+import { ScrollView } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+
+const primary = theme.colors.primary;
 
 const Receipt = () => {
     const navigation = useNavigation();
   return (
     <SafeAreaView style={styles.container}>
-        <TouchableOpacity style={styles.back} onPress={() => navigation.goBack()}>
-                <Icon name="back" size={30} color="black" />
-        </TouchableOpacity>
+    <StatusBar style="ligth" backgroundColor={primary}/>
+        <View style={styles.header}>
+          <TouchableOpacity style={styles.back} onPress={() => navigation.goBack()}>
+            <Icon name="back" size={30} color="white" />
+          </TouchableOpacity>
+            <View style={styles.aviContainer}>
+              <Text style={styles.avi}>Recibo</Text>
+            </View>
+          </View>
         <View style={styles.receiptContainer}>
             <Image source={zigzag} style={styles.zigzagBorderBottom} resizeMode="repeat" />
             <View style={styles.receiptContent}>
+                {/* Aquí va el contenido del texto del recibo */}
+
+                <View style={styles.textTitleContainer}>
+                    <Text style={styles.receiptTextTitle}>CASH RECEIPT</Text>
+                </View>            
+                <View style={styles.dottedLine} />
+
+                <View style={styles.textLine}>
+                    <Text>Date:</Text>
+                    <Text>08/03/2024</Text>
+                </View>
+                <View style={styles.textLine}>
+                    <Text>Store manager:</Text>
+                    <Text>John Doe</Text>
+                </View>
+                <View style={styles.textLine}>
+                    <Text>Cashier:</Text>
+                    <Text>Peter Smith</Text>
+                </View>
+                <View style={styles.dottedLine} />
+
+                <View style={styles.textLine}>
+                    <Text>nota N° 72:</Text>
+                    <Text>125 Bs</Text>
+                </View>
+                <View style={styles.textLine}>
+                    <Text>nota N° 92:</Text>
+                    <Text>320 Bs</Text>
+                </View>
+                <View style={styles.textLine}>
+                    <Text>nota N° 04:</Text>
+                    <Text>12 Bs</Text>
+                </View>
             </View>
             <Image source={zigzag} style={styles.zigzagBorder} resizeMode="repeat" />
         </View>
+        <View style={styles.buttonContainer}>
+            <TouchableOpacity activeOpacity={0} style={styles.button}>
+                <Text style={styles.buttonText}>Emitidas</Text>
+            </TouchableOpacity>
+            <TouchableOpacity activeOpacity={0} style={styles.button}>
+                <Text style={styles.buttonText}>Imprimir</Text>
+            </TouchableOpacity>
+        </View>
     </SafeAreaView>
   );
 };
@@ -28,21 +79,44 @@ const styles = StyleSheet.create({
     container: {
         marginTop: 30,
         flex: 1,
+        justifyContent: 'center',
+        alignItems: "center",
+        paddingVertical: 20,
+        backgroundColor: theme.colors.primary,
     },
     receiptContainer: {
         flex: 1,
+        justifyContent: 'center',
         alignItems: "center",
+        paddingBottom: 30,
     },
     zigzagBorder: {
         width: screenWidth - 40,
         height: 20,
         zIndex: 1,
     },
+    dotsContainer: {
+        justifyContent: 'center',
+        alignItems: "center",
+    },
+    dots: {
+        justifyContent: 'center',
+        backgroundColor: 'blue',
+    },
+    dottedLine: {
+        borderBottomWidth: 3,
+        borderBottomColor: 'black',
+        borderStyle: 'dotted',
+        marginVertical: 8,
+    },
     receiptContent: {
-        height: 200,
+        justifyContent: 'center',
+        paddingHorizontal: 40,
+        minHeight: 400,
         width: screenWidth - 40,
         backgroundColor: theme.colors.primary,
-        elevation: 150,
+        elevation: 60,
+        shadowColor: theme.colors.tertiary,
     },
     zigzagBorderBottom: {
         width: screenWidth - 40,
@@ -53,11 +127,55 @@ const styles = StyleSheet.create({
     back: {
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: theme.colors.skyBlue,
+        backgroundColor: theme.colors.tertiary,
         borderRadius: 20,
         width: 60,
         height: 60,
-      }
+        marginLeft: 20,
+      },
+    textTitleContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    textLine: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+      },
+      aviContainer: {
+        flex:1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+      avi: {
+        fontWeight: 'bold',
+        fontSize: 22,
+        marginRight: 80,
+      },
+      buttonContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        width: screenWidth - 40,
+      },
+      button: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        elevation: 5,
+        paddingVertical: 15,
+        paddingHorizontal: 25,
+        backgroundColor: theme.colors.tertiary,
+        borderRadius: 22,
+        width: screenWidth/2 - 30,
+      },
+      buttonText: {
+        color: theme.colors.primary,
+        fontSize: 16,
+        fontWeight: "bold",
+      },
   });
 
 export default Receipt;