Merge branch 'dev' into agregaNumeroViviendaRegistroInquilino
This commit is contained in:
		
						commit
						6ebbdb5a72
					
				| 
						 | 
				
			
			@ -1,27 +1,60 @@
 | 
			
		|||
import React from "react";
 | 
			
		||||
import React,{useState} from "react";
 | 
			
		||||
import {
 | 
			
		||||
  NativeBaseProvider
 | 
			
		||||
  NativeBaseProvider, 
 | 
			
		||||
  Icon
 | 
			
		||||
} from "native-base";
 | 
			
		||||
import { NavigationContainer } from '@react-navigation/native';
 | 
			
		||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
 | 
			
		||||
import { createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 | 
			
		||||
import LogIn from "./components/LogIn";
 | 
			
		||||
import Home from "./components/Home";
 | 
			
		||||
import RecoverPassword from "./components/RecoverPassword";
 | 
			
		||||
import Reservas from "./components/Reservas";
 | 
			
		||||
import Profile from "./components/Profile"; 
 | 
			
		||||
import { MaterialCommunityIcons } from '@expo/vector-icons'; 
 | 
			
		||||
import AreaComun from "./components/AreaComun";
 | 
			
		||||
 | 
			
		||||
const Stack = createNativeStackNavigator();
 | 
			
		||||
const Tab = createBottomTabNavigator(); 
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
function HomeTab() {
 | 
			
		||||
 | 
			
		||||
const [selected, setSelected] = useState(0);
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <Tab.Navigator initialRouteName="Comunicados" > 
 | 
			
		||||
    <Tab.Screen  name="Comunicados" component={Home} options={{headerStyle: {
 | 
			
		||||
      backgroundColor: "#D7A86E"
 | 
			
		||||
    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(0)} /> 
 | 
			
		||||
    <Tab.Screen  name="Reservas" component={Reservas } options={{headerStyle: {
 | 
			
		||||
      backgroundColor: "#D7A86E"
 | 
			
		||||
    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="#D7A86E" size="md" />)} } onclick={() => setSelected(1)}  /> 
 | 
			
		||||
    <Tab.Screen  name="Perfil" component={Profile} options={{headerStyle: {
 | 
			
		||||
      backgroundColor: "#D7A86E"
 | 
			
		||||
    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 2 ? 'account' : 'account-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(2)} /> 
 | 
			
		||||
  </Tab.Navigator>
 | 
			
		||||
  )
 | 
			
		||||
}
 | 
			
		||||
export default function App() {
 | 
			
		||||
  return (
 | 
			
		||||
    <NativeBaseProvider>
 | 
			
		||||
 | 
			
		||||
    <NavigationContainer>
 | 
			
		||||
      <Stack.Navigator initialRouteName="LogIn">
 | 
			
		||||
        <Stack.Screen name="Inicio" component={LogIn} />
 | 
			
		||||
        <Stack.Screen name="Home" component={Home} />
 | 
			
		||||
       <Stack.Screen name="Password" component={RecoverPassword} />
 | 
			
		||||
        <Stack.Screen name="Inicio" component={LogIn} options={{headerStyle: {
 | 
			
		||||
      backgroundColor: "#D7A86E"
 | 
			
		||||
    }}} />
 | 
			
		||||
        <Stack.Screen name="Comunicados" component={HomeTab} options={{headerShown: false}} />
 | 
			
		||||
        <Stack.Screen name="Password" component={RecoverPassword} />
 | 
			
		||||
        <Stack.Screen name="area" component={AreaComun} options={{headerStyle: {
 | 
			
		||||
      backgroundColor: "#D7A86E"
 | 
			
		||||
    }}} />
 | 
			
		||||
      </Stack.Navigator>
 | 
			
		||||
 | 
			
		||||
    
 | 
			
		||||
    </NavigationContainer>
 | 
			
		||||
      
 | 
			
		||||
    </NativeBaseProvider>
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,53 @@
 | 
			
		|||
import React from "react";
 | 
			
		||||
 | 
			
		||||
import {
 | 
			
		||||
    Box, 
 | 
			
		||||
    Heading, 
 | 
			
		||||
    VStack, 
 | 
			
		||||
    FormControl, 
 | 
			
		||||
    Input, 
 | 
			
		||||
    Button,
 | 
			
		||||
    Center
 | 
			
		||||
  } from "native-base";
 | 
			
		||||
 | 
			
		||||
export default function AreaComun({navigation}){
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
        <Center>
 | 
			
		||||
             <Box safeArea p="2" w="90%" maxW="290" py="8">
 | 
			
		||||
        <Heading size="lg" color="coolGray.800" _dark={{
 | 
			
		||||
        color: "warmGray.50"
 | 
			
		||||
      }} fontWeight="semibold">
 | 
			
		||||
          Katoikia
 | 
			
		||||
        </Heading>
 | 
			
		||||
        <Heading mt="1" color="coolGray.600" _dark={{
 | 
			
		||||
        color: "warmGray.200"
 | 
			
		||||
      }} fontWeight="medium" size="xs">
 | 
			
		||||
         Reserve su área común 
 | 
			
		||||
        </Heading>
 | 
			
		||||
        <VStack space={3} mt="5">
 | 
			
		||||
          <FormControl>
 | 
			
		||||
            <FormControl.Label>Hora de inicio</FormControl.Label>
 | 
			
		||||
            <Input type="text"/>
 | 
			
		||||
          </FormControl>
 | 
			
		||||
          <FormControl>
 | 
			
		||||
            <FormControl.Label>Hora de finalización</FormControl.Label>
 | 
			
		||||
            <Input type="text" />
 | 
			
		||||
          </FormControl>
 | 
			
		||||
          <FormControl>
 | 
			
		||||
            <FormControl.Label>Lugar</FormControl.Label>
 | 
			
		||||
            <Input type="text" />
 | 
			
		||||
          </FormControl>
 | 
			
		||||
        
 | 
			
		||||
          <Button mt="2" backgroundColor="orange.300">
 | 
			
		||||
            Reservar
 | 
			
		||||
          </Button>
 | 
			
		||||
          <Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Comunicados')}>
 | 
			
		||||
            Cancelar
 | 
			
		||||
          </Button>
 | 
			
		||||
        </VStack>
 | 
			
		||||
      </Box>
 | 
			
		||||
        </Center>
 | 
			
		||||
       
 | 
			
		||||
    )
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -2,34 +2,100 @@ import React from "react";
 | 
			
		|||
import {
 | 
			
		||||
    Text,
 | 
			
		||||
    HStack,
 | 
			
		||||
    IconButton,
 | 
			
		||||
    Badge,
 | 
			
		||||
    Box,
 | 
			
		||||
    StatusBar,
 | 
			
		||||
    Icon, 
 | 
			
		||||
    MaterialIcons,
 | 
			
		||||
    Center
 | 
			
		||||
Pressable,
 | 
			
		||||
    Spacer, 
 | 
			
		||||
  } from "native-base";
 | 
			
		||||
 | 
			
		||||
  import { MaterialCommunityIcons } from '@expo/vector-icons'; 
 | 
			
		||||
export default function Home(){
 | 
			
		||||
 | 
			
		||||
  const [selected, setSelected] = React.useState(0);
 | 
			
		||||
    return (
 | 
			
		||||
        <Center width={"100%"} marginTop={"auto"}>
 | 
			
		||||
             <StatusBar bg="#D7A86E" barStyle="light-content" />
 | 
			
		||||
      <Box safeAreaTop bg="#D7A86E" />
 | 
			
		||||
      <HStack bg="#D7A86E" px="2" py="4" justifyContent="space-between" alignItems="center" w="100%" maxW="100%">
 | 
			
		||||
        <HStack alignItems="center">
 | 
			
		||||
          <IconButton icon={<Icon size="sm" as={MaterialIcons} name="menu" color="white" />} />
 | 
			
		||||
          <Text color="white" fontSize="20" fontWeight="bold">
 | 
			
		||||
            Home
 | 
			
		||||
 | 
			
		||||
      <Box alignItems="center">
 | 
			
		||||
      <Pressable onPress={() => console.log("I'm Pressed")} rounded="8" overflow="hidden" borderWidth="1" borderColor="coolGray.300" maxW="96" shadow="3" bg="coolGray.100" p="5" marginTop="4">
 | 
			
		||||
        <Box>
 | 
			
		||||
          <HStack alignItems="center">
 | 
			
		||||
            <Badge colorScheme="darkBlue" _text={{
 | 
			
		||||
            color: "white"
 | 
			
		||||
          }} variant="solid" rounded="4">
 | 
			
		||||
              Comunicado
 | 
			
		||||
            </Badge>
 | 
			
		||||
            <Spacer />
 | 
			
		||||
            <Text fontSize={10} color="coolGray.800">
 | 
			
		||||
              1 month ago
 | 
			
		||||
            </Text>
 | 
			
		||||
          </HStack>
 | 
			
		||||
          <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
 | 
			
		||||
            Administrador de Comunidad
 | 
			
		||||
          </Text>
 | 
			
		||||
        </HStack>
 | 
			
		||||
        <HStack>
 | 
			
		||||
          <IconButton icon={<Icon as={MaterialIcons} name="favorite" size="sm" color="white" />} />
 | 
			
		||||
          <IconButton icon={<Icon as={MaterialIcons} name="search" size="sm" color="white" />} />
 | 
			
		||||
          <IconButton icon={<Icon as={MaterialIcons} name="more-vert" size="sm" color="white" />} />
 | 
			
		||||
        </HStack>
 | 
			
		||||
      </HStack>
 | 
			
		||||
      </Center>
 | 
			
		||||
          <Text mt="2" fontSize="sm" color="coolGray.700">
 | 
			
		||||
            Notificacion sobre la aplicacion
 | 
			
		||||
          </Text>
 | 
			
		||||
         
 | 
			
		||||
        </Box>
 | 
			
		||||
      </Pressable>
 | 
			
		||||
      <Pressable onPress={() => console.log("I'm Pressed")} rounded="8" overflow="hidden" borderWidth="1" borderColor="coolGray.300" maxW="96" shadow="3" bg="coolGray.100" p="5" marginTop="4">
 | 
			
		||||
        <Box>
 | 
			
		||||
          <HStack alignItems="center">
 | 
			
		||||
            <Badge colorScheme="darkBlue" _text={{
 | 
			
		||||
            color: "white"
 | 
			
		||||
          }} variant="solid" rounded="4">
 | 
			
		||||
              Comunicado
 | 
			
		||||
            </Badge>
 | 
			
		||||
            <Spacer />
 | 
			
		||||
            <Text fontSize={10} color="coolGray.800">
 | 
			
		||||
              1 month ago
 | 
			
		||||
            </Text>
 | 
			
		||||
          </HStack>
 | 
			
		||||
          <Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
 | 
			
		||||
            Administrador General
 | 
			
		||||
          </Text>
 | 
			
		||||
          <Text mt="2" fontSize="sm" color="coolGray.700">
 | 
			
		||||
            Notificacion sobre la aplicacion
 | 
			
		||||
          </Text>
 | 
			
		||||
         
 | 
			
		||||
        </Box>
 | 
			
		||||
      </Pressable>
 | 
			
		||||
    </Box>
 | 
			
		||||
      //   <Center width={"100%"} marginTop={"auto"}>
 | 
			
		||||
           
 | 
			
		||||
      // <Box safeAreaTop bg="#D7A86E" flex={1} />
 | 
			
		||||
      // <HStack bg="#D7A86E" px="2" py="4" justifyContent="space-between" alignItems="center" w="100%" maxW="100%">
 | 
			
		||||
 | 
			
		||||
      //   <Pressable opacity={selected === 0 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(0) && navigation.navigate('Home')}>
 | 
			
		||||
      //       <Center>
 | 
			
		||||
      //         <Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="white" size="md" />
 | 
			
		||||
      //         <Text color="white" fontSize="15">
 | 
			
		||||
      //           Inicio
 | 
			
		||||
      //         </Text>
 | 
			
		||||
      //       </Center>
 | 
			
		||||
      //     </Pressable>
 | 
			
		||||
      
 | 
			
		||||
        
 | 
			
		||||
      //   <Pressable opacity={selected === 1 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(1) && ( () => navigation.navigate('Reservas'))}>
 | 
			
		||||
      //       <Center>
 | 
			
		||||
      //         <Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="white" size="md" />
 | 
			
		||||
      //         <Text color="white" fontSize="15">
 | 
			
		||||
      //           Reservas
 | 
			
		||||
      //         </Text>
 | 
			
		||||
      //       </Center>
 | 
			
		||||
      //     </Pressable>
 | 
			
		||||
      
 | 
			
		||||
       
 | 
			
		||||
      //   <Pressable opacity={selected === 2 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(2)}>
 | 
			
		||||
      //       <Center>
 | 
			
		||||
      //         <Icon mb="2" as={<MaterialCommunityIcons name={selected === 2 ? 'account' : 'account-outline'} />} color="white" size="md" />
 | 
			
		||||
      //         <Text color="white" fontSize="15">
 | 
			
		||||
      //           Perfil
 | 
			
		||||
      //         </Text>
 | 
			
		||||
      //       </Center>
 | 
			
		||||
      //     </Pressable>
 | 
			
		||||
     
 | 
			
		||||
        
 | 
			
		||||
      // </HStack>
 | 
			
		||||
      // </Center>
 | 
			
		||||
       
 | 
			
		||||
    )
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -1,21 +1,92 @@
 | 
			
		|||
import React from "react";
 | 
			
		||||
import Cookies from 'universal-cookie';
 | 
			
		||||
import {
 | 
			
		||||
  Text,
 | 
			
		||||
  Link,
 | 
			
		||||
  View,
 | 
			
		||||
  Center,
 | 
			
		||||
  Heading,
 | 
			
		||||
  VStack,
 | 
			
		||||
  Box,
 | 
			
		||||
  FormControl,
 | 
			
		||||
  Input,
 | 
			
		||||
  Button,
 | 
			
		||||
  Image, 
 | 
			
		||||
  TextInput
 | 
			
		||||
  Image
 | 
			
		||||
} from "native-base";
 | 
			
		||||
import logo from "../assets/logo-katoikia.png";
 | 
			
		||||
import { Entypo } from '@expo/vector-icons'; 
 | 
			
		||||
import { MaterialCommunityIcons } from '@expo/vector-icons'; 
 | 
			
		||||
import { View, TextInput, StyleSheet } from "react-native";
 | 
			
		||||
 | 
			
		||||
const baseURL = "http://localhost:4000/user/loginUser"; 
 | 
			
		||||
const cookies = new Cookies(); 
 | 
			
		||||
 | 
			
		||||
const styles = StyleSheet.create({
 | 
			
		||||
  input: {
 | 
			
		||||
    height: 40,
 | 
			
		||||
    margin: 10,
 | 
			
		||||
    borderWidth: 0.5,
 | 
			
		||||
    padding: 5,
 | 
			
		||||
    flex: 1,
 | 
			
		||||
    paddingTop: 10,
 | 
			
		||||
    paddingRight: 10,
 | 
			
		||||
    paddingBottom: 10,
 | 
			
		||||
    paddingLeft: 0,
 | 
			
		||||
    marginTop: 50, 
 | 
			
		||||
    marginBottom: 10
 | 
			
		||||
  }, 
 | 
			
		||||
 | 
			
		||||
  iconStyle: {
 | 
			
		||||
    padding: 10, 
 | 
			
		||||
  }, 
 | 
			
		||||
 | 
			
		||||
  viewSection: {
 | 
			
		||||
    flex: 1,
 | 
			
		||||
    flexDirection: 'row',
 | 
			
		||||
    justifyContent: 'center',
 | 
			
		||||
    alignItems: 'center',
 | 
			
		||||
    margin: 10
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  container: {
 | 
			
		||||
 | 
			
		||||
  }
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
const iniciarSesion = async()  => {
 | 
			
		||||
 | 
			
		||||
  try {
 | 
			
		||||
 | 
			
		||||
    await fetch(baseURL, {
 | 
			
		||||
      cache: 'no-cache', 
 | 
			
		||||
      method: 'POST', 
 | 
			
		||||
      body: JSON.stringify(), 
 | 
			
		||||
      headers: {
 | 
			
		||||
        'Content-Type': 'application/json'
 | 
			
		||||
      }
 | 
			
		||||
    })
 | 
			
		||||
    .then(response => {
 | 
			
		||||
      if (response.status != 201){
 | 
			
		||||
        console.log('ocurrio un error ');
 | 
			
		||||
      }else{
 | 
			
		||||
        return response.json(); 
 | 
			
		||||
      }
 | 
			
		||||
    })
 | 
			
		||||
    .then( response => {
 | 
			
		||||
       const user = response.message
 | 
			
		||||
 | 
			
		||||
        if(user.user_type == '3'){
 | 
			
		||||
          cookies.set('id',user._id, {path: "/"} )
 | 
			
		||||
          cookies.set('name',user.name, {path: "/"} )
 | 
			
		||||
          cookies.set('email',user.email, {path: "/"} )
 | 
			
		||||
          cookies.set('type',user.user_type, {path: "/"} )
 | 
			
		||||
        }
 | 
			
		||||
    })
 | 
			
		||||
    
 | 
			
		||||
  } catch (error) {
 | 
			
		||||
    
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
   
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export default function LogIn({navigation}) {
 | 
			
		||||
  return (
 | 
			
		||||
| 
						 | 
				
			
			@ -23,11 +94,15 @@ export default function LogIn({navigation}) {
 | 
			
		|||
      
 | 
			
		||||
      <Center w="100%">
 | 
			
		||||
        <Box safeArea p="2" py="8" w="90%" maxW="290">
 | 
			
		||||
        <Image source={
 | 
			
		||||
 | 
			
		||||
          <Center> 
 | 
			
		||||
          <Image  source={
 | 
			
		||||
          logo
 | 
			
		||||
        } width={500} height={550}
 | 
			
		||||
        } width={500} height={550} m='2'
 | 
			
		||||
    alt="Katoikia logo" size="xl" justifyContent="center" />
 | 
			
		||||
 | 
			
		||||
          </Center>
 | 
			
		||||
      
 | 
			
		||||
          <Heading
 | 
			
		||||
            size="lg"
 | 
			
		||||
            fontWeight="600"
 | 
			
		||||
| 
						 | 
				
			
			@ -50,27 +125,29 @@ export default function LogIn({navigation}) {
 | 
			
		|||
             Su app de comunidad de confianza
 | 
			
		||||
          </Heading>
 | 
			
		||||
 | 
			
		||||
          <VStack space={3} mt="5">
 | 
			
		||||
<View style={styles.container}>
 | 
			
		||||
  <VStack space={3} mt="5">
 | 
			
		||||
            <FormControl>
 | 
			
		||||
              <FormControl.Label> Correo Electrónico </FormControl.Label>
 | 
			
		||||
 | 
			
		||||
              <View> 
 | 
			
		||||
              <Entypo name="email" size={20} color="grey" />
 | 
			
		||||
              <Input type="text" />
 | 
			
		||||
              <View style={styles.viewSection}> 
 | 
			
		||||
              <Entypo name="email" size={20} color="grey" style={styles.iconStyle} />
 | 
			
		||||
              <TextInput type="text" style={styles.input} />
 | 
			
		||||
              </View>
 | 
			
		||||
              
 | 
			
		||||
            </FormControl>
 | 
			
		||||
            <FormControl>
 | 
			
		||||
            <FormControl.Label> Contraseña </FormControl.Label>
 | 
			
		||||
                <View> 
 | 
			
		||||
                <MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" />
 | 
			
		||||
                <Input type="password" />
 | 
			
		||||
                <View style={styles.viewSection}> 
 | 
			
		||||
                <MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" style={styles.iconStyle}/>
 | 
			
		||||
                <TextInput type="password" style={styles.input} />
 | 
			
		||||
                </View>
 | 
			
		||||
              <Link
 | 
			
		||||
                _text={{
 | 
			
		||||
                  fontSize: "xs",
 | 
			
		||||
                  fontWeight: "500",
 | 
			
		||||
                  color: "indigo.500",
 | 
			
		||||
                  marginTop: "10"
 | 
			
		||||
                }}
 | 
			
		||||
                alignSelf="flex-end"
 | 
			
		||||
                mt="1"
 | 
			
		||||
| 
						 | 
				
			
			@ -82,13 +159,17 @@ export default function LogIn({navigation}) {
 | 
			
		|||
               
 | 
			
		||||
              </Link>
 | 
			
		||||
            </FormControl>
 | 
			
		||||
            <Button  mt="2" colorScheme="primary" onPress={() => navigation.navigate('Home')}
 | 
			
		||||
            <Button  mt="2" backgroundColor="#D7A86E" onPress={() => navigation.navigate('Comunicados')}
 | 
			
		||||
            >
 | 
			
		||||
              <Text>Continuar</Text>
 | 
			
		||||
            </Button>
 | 
			
		||||
           
 | 
			
		||||
          </VStack>
 | 
			
		||||
          </VStack></View>
 | 
			
		||||
          
 | 
			
		||||
        </Box>
 | 
			
		||||
      </Center>
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,57 @@
 | 
			
		|||
import React from "react";
 | 
			
		||||
 | 
			
		||||
import {
 | 
			
		||||
    Box, 
 | 
			
		||||
    Heading, 
 | 
			
		||||
    VStack, 
 | 
			
		||||
    FormControl, 
 | 
			
		||||
    Input, 
 | 
			
		||||
    Button,
 | 
			
		||||
    Center
 | 
			
		||||
  } from "native-base";
 | 
			
		||||
 | 
			
		||||
export default function Profile({navigation}){
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
        <Center>
 | 
			
		||||
             <Box safeArea p="2" w="90%" maxW="290" py="8">
 | 
			
		||||
        <Heading size="lg" color="coolGray.800" _dark={{
 | 
			
		||||
        color: "warmGray.50"
 | 
			
		||||
      }} fontWeight="semibold">
 | 
			
		||||
          Katoikia
 | 
			
		||||
        </Heading>
 | 
			
		||||
        <Heading mt="1" color="coolGray.600" _dark={{
 | 
			
		||||
        color: "warmGray.200"
 | 
			
		||||
      }} fontWeight="medium" size="xs">
 | 
			
		||||
          Modifique sus datos
 | 
			
		||||
        </Heading>
 | 
			
		||||
        <VStack space={3} mt="5">
 | 
			
		||||
          <FormControl>
 | 
			
		||||
            <FormControl.Label>Nombre</FormControl.Label>
 | 
			
		||||
            <Input type="text"/>
 | 
			
		||||
          </FormControl>
 | 
			
		||||
          <FormControl>
 | 
			
		||||
            <FormControl.Label>Correo Electrónico</FormControl.Label>
 | 
			
		||||
            <Input type="text" />
 | 
			
		||||
          </FormControl>
 | 
			
		||||
          <FormControl>
 | 
			
		||||
            <FormControl.Label>Teléfono</FormControl.Label>
 | 
			
		||||
            <Input type="text" />
 | 
			
		||||
          </FormControl>
 | 
			
		||||
          <FormControl>
 | 
			
		||||
            <FormControl.Label>Contraseña actual</FormControl.Label>
 | 
			
		||||
            <Input type="password" />
 | 
			
		||||
          </FormControl>
 | 
			
		||||
          
 | 
			
		||||
          <Button mt="2" backgroundColor="orange.300">
 | 
			
		||||
            Actualizar
 | 
			
		||||
          </Button>
 | 
			
		||||
          <Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Inicio')}>
 | 
			
		||||
            Cerrar sesión
 | 
			
		||||
          </Button>
 | 
			
		||||
        </VStack>
 | 
			
		||||
      </Box>
 | 
			
		||||
        </Center>
 | 
			
		||||
       
 | 
			
		||||
    )
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,148 @@
 | 
			
		|||
import React from "react";
 | 
			
		||||
import {
 | 
			
		||||
  Text,
 | 
			
		||||
  HStack,
 | 
			
		||||
  AntDesign,
 | 
			
		||||
  Heading,
 | 
			
		||||
  Stack,
 | 
			
		||||
  Box,
 | 
			
		||||
  ScrollView,
 | 
			
		||||
  Fab,
 | 
			
		||||
  Icon
 | 
			
		||||
} from "native-base";
 | 
			
		||||
import logo from "../assets/logo-katoikia.png";
 | 
			
		||||
import { Entypo } from '@expo/vector-icons'; 
 | 
			
		||||
import { MaterialCommunityIcons } from '@expo/vector-icons'; 
 | 
			
		||||
import { View, TextInput, StyleSheet } from "react-native";
 | 
			
		||||
 | 
			
		||||
const styles = StyleSheet.create({
 | 
			
		||||
  input: {
 | 
			
		||||
    height: 40,
 | 
			
		||||
    margin: 10,
 | 
			
		||||
    borderWidth: 0.5,
 | 
			
		||||
    padding: 5,
 | 
			
		||||
    flex: 1,
 | 
			
		||||
    paddingTop: 10,
 | 
			
		||||
    paddingRight: 10,
 | 
			
		||||
    paddingBottom: 10,
 | 
			
		||||
    paddingLeft: 0,
 | 
			
		||||
    marginTop: 50, 
 | 
			
		||||
    marginBottom: 10
 | 
			
		||||
  }, 
 | 
			
		||||
 | 
			
		||||
  iconStyle: {
 | 
			
		||||
    padding: 10, 
 | 
			
		||||
  }, 
 | 
			
		||||
 | 
			
		||||
  viewSection: {
 | 
			
		||||
    flex: 1,
 | 
			
		||||
    flexDirection: 'row',
 | 
			
		||||
    justifyContent: 'center',
 | 
			
		||||
    alignItems: 'center',
 | 
			
		||||
    margin: 10
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  container: {
 | 
			
		||||
 | 
			
		||||
  }
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
export default function Reservas({navigation}) {
 | 
			
		||||
  return (
 | 
			
		||||
  
 | 
			
		||||
    <ScrollView showsVerticalScrollIndicator={false}>
 | 
			
		||||
          
 | 
			
		||||
       
 | 
			
		||||
      
 | 
			
		||||
    <Box alignItems="center">
 | 
			
		||||
      <Box width="80" rounded="lg" overflow="hidden" borderColor="coolGray.200" borderWidth="1" _dark={{
 | 
			
		||||
      borderColor: "coolGray.600",
 | 
			
		||||
      backgroundColor: "gray.700"
 | 
			
		||||
    }} _web={{
 | 
			
		||||
      shadow: 2,
 | 
			
		||||
      borderWidth: 0
 | 
			
		||||
    }} _light={{
 | 
			
		||||
      backgroundColor: "gray.50"
 | 
			
		||||
    }}>
 | 
			
		||||
        <Stack p="4" space={3}>
 | 
			
		||||
          <Stack space={2}>
 | 
			
		||||
            <Heading size="md" ml="-1">
 | 
			
		||||
              Reserva #1
 | 
			
		||||
            </Heading>
 | 
			
		||||
            <Text fontSize="xs" _light={{
 | 
			
		||||
            color: "violet.500"
 | 
			
		||||
          }} _dark={{
 | 
			
		||||
            color: "violet.400"
 | 
			
		||||
          }} fontWeight="500" ml="-0.5" mt="-1">
 | 
			
		||||
              horario de Reserva
 | 
			
		||||
            </Text>
 | 
			
		||||
          </Stack>
 | 
			
		||||
          <Text fontWeight="400">
 | 
			
		||||
            Descripcion
 | 
			
		||||
          </Text>
 | 
			
		||||
          <HStack alignItems="center" space={4} justifyContent="space-between">
 | 
			
		||||
            <HStack alignItems="center">
 | 
			
		||||
              <Text color="coolGray.600" _dark={{
 | 
			
		||||
              color: "warmGray.200"
 | 
			
		||||
            }} fontWeight="400">
 | 
			
		||||
                6 mins ago
 | 
			
		||||
              </Text>
 | 
			
		||||
            </HStack>
 | 
			
		||||
          </HStack>
 | 
			
		||||
        </Stack>
 | 
			
		||||
      </Box>
 | 
			
		||||
    </Box>
 | 
			
		||||
 | 
			
		||||
    <Box alignItems="center" width={"100%"}>
 | 
			
		||||
      <Box width="80" rounded="lg" overflow="hidden" borderColor="coolGray.200" borderWidth="1" _dark={{
 | 
			
		||||
      borderColor: "coolGray.600",
 | 
			
		||||
      backgroundColor: "gray.700"
 | 
			
		||||
    }} _web={{
 | 
			
		||||
      shadow: 2,
 | 
			
		||||
      borderWidth: 0
 | 
			
		||||
    }} _light={{
 | 
			
		||||
      backgroundColor: "gray.50"
 | 
			
		||||
    }}>
 | 
			
		||||
        
 | 
			
		||||
        <Stack p="4" space={3}>
 | 
			
		||||
          <Stack space={2}>
 | 
			
		||||
            <Heading size="md" ml="-1">
 | 
			
		||||
              Reserva #1
 | 
			
		||||
            </Heading>
 | 
			
		||||
            <Text fontSize="xs" _light={{
 | 
			
		||||
            color: "violet.500"
 | 
			
		||||
          }} _dark={{
 | 
			
		||||
            color: "violet.400"
 | 
			
		||||
          }} fontWeight="500" ml="-0.5" mt="-1">
 | 
			
		||||
              horario de Reserva
 | 
			
		||||
            </Text>
 | 
			
		||||
          </Stack>
 | 
			
		||||
          <Text fontWeight="400">
 | 
			
		||||
            Descripcion
 | 
			
		||||
          </Text>
 | 
			
		||||
          <HStack alignItems="center" space={4} justifyContent="space-between">
 | 
			
		||||
            <HStack alignItems="center">
 | 
			
		||||
              <Text color="coolGray.600" _dark={{
 | 
			
		||||
              color: "warmGray.200"
 | 
			
		||||
            }} fontWeight="400">
 | 
			
		||||
                6 mins ago
 | 
			
		||||
              </Text>
 | 
			
		||||
            </HStack>
 | 
			
		||||
          </HStack>
 | 
			
		||||
        </Stack>
 | 
			
		||||
      </Box>
 | 
			
		||||
    </Box>
 | 
			
		||||
 | 
			
		||||
    <Box height="200" w="300" shadow="2" rounded="lg" m='5' ml='9' _dark={{
 | 
			
		||||
      bg: "coolGray.200:alpha.20"
 | 
			
		||||
    }} _light={{
 | 
			
		||||
      bg: "coolGray.200:alpha.20"
 | 
			
		||||
    }}>
 | 
			
		||||
        <Fab renderInPortal={false} shadow={2} size="sm" icon={<Icon mb="0.5" as={<MaterialCommunityIcons name={'plus'} />} color="white" size="sm" />} onPress={() => navigation.navigate('area')}/>
 | 
			
		||||
      </Box>
 | 
			
		||||
    </ScrollView>
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -10,6 +10,7 @@
 | 
			
		|||
      "license": "MIT",
 | 
			
		||||
      "dependencies": {
 | 
			
		||||
        "@react-native-community/masked-view": "^0.1.11",
 | 
			
		||||
        "@react-navigation/bottom-tabs": "^6.3.2",
 | 
			
		||||
        "@react-navigation/native": "^6.0.11",
 | 
			
		||||
        "@react-navigation/native-stack": "^6.7.0",
 | 
			
		||||
        "@react-navigation/stack": "^6.2.2",
 | 
			
		||||
| 
						 | 
				
			
			@ -24,7 +25,8 @@
 | 
			
		|||
        "react-native-safe-area-context": "3.3.2",
 | 
			
		||||
        "react-native-screens": "~3.10.1",
 | 
			
		||||
        "react-native-svg": "12.1.1",
 | 
			
		||||
        "react-native-web": "0.17.1"
 | 
			
		||||
        "react-native-web": "0.17.1",
 | 
			
		||||
        "universal-cookie": "^4.0.4"
 | 
			
		||||
      },
 | 
			
		||||
      "devDependencies": {
 | 
			
		||||
        "@babel/core": "^7.12.9"
 | 
			
		||||
| 
						 | 
				
			
			@ -3533,6 +3535,23 @@
 | 
			
		|||
      "resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-1.0.0.tgz",
 | 
			
		||||
      "integrity": "sha512-0jbp4RxjYopTsIdLl+/Fy2TiwVYHy4mgeu07DG4b/LyM0OS/+lPP5c9sbnt/AMlnF6qz2JRZpPpGw1eMNS6A4w=="
 | 
			
		||||
    },
 | 
			
		||||
    "node_modules/@react-navigation/bottom-tabs": {
 | 
			
		||||
      "version": "6.3.2",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.3.2.tgz",
 | 
			
		||||
      "integrity": "sha512-uS0XV2aH7bAW54Zuf5ks2V60riarbMALyMz3cB3204l4aGhx41UPUIr/K72pGAVdIPizpjz8Fk8qwczAwex9eg==",
 | 
			
		||||
      "dependencies": {
 | 
			
		||||
        "@react-navigation/elements": "^1.3.4",
 | 
			
		||||
        "color": "^4.2.3",
 | 
			
		||||
        "warn-once": "^0.1.0"
 | 
			
		||||
      },
 | 
			
		||||
      "peerDependencies": {
 | 
			
		||||
        "@react-navigation/native": "^6.0.0",
 | 
			
		||||
        "react": "*",
 | 
			
		||||
        "react-native": "*",
 | 
			
		||||
        "react-native-safe-area-context": ">= 3.0.0",
 | 
			
		||||
        "react-native-screens": ">= 3.0.0"
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "node_modules/@react-navigation/core": {
 | 
			
		||||
      "version": "6.2.2",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.2.2.tgz",
 | 
			
		||||
| 
						 | 
				
			
			@ -4077,6 +4096,11 @@
 | 
			
		|||
      "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
 | 
			
		||||
      "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
 | 
			
		||||
    },
 | 
			
		||||
    "node_modules/@types/cookie": {
 | 
			
		||||
      "version": "0.3.3",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
 | 
			
		||||
      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
 | 
			
		||||
    },
 | 
			
		||||
    "node_modules/@types/graceful-fs": {
 | 
			
		||||
      "version": "4.1.5",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
 | 
			
		||||
| 
						 | 
				
			
			@ -5163,6 +5187,14 @@
 | 
			
		|||
        "safe-buffer": "~5.1.1"
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "node_modules/cookie": {
 | 
			
		||||
      "version": "0.4.2",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
 | 
			
		||||
      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
 | 
			
		||||
      "engines": {
 | 
			
		||||
        "node": ">= 0.6"
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "node_modules/copy-descriptor": {
 | 
			
		||||
      "version": "0.1.1",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
 | 
			
		||||
| 
						 | 
				
			
			@ -10806,6 +10838,15 @@
 | 
			
		|||
        "node": ">=0.10.0"
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "node_modules/universal-cookie": {
 | 
			
		||||
      "version": "4.0.4",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
 | 
			
		||||
      "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
 | 
			
		||||
      "dependencies": {
 | 
			
		||||
        "@types/cookie": "^0.3.3",
 | 
			
		||||
        "cookie": "^0.4.0"
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "node_modules/universalify": {
 | 
			
		||||
      "version": "1.0.0",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
 | 
			
		||||
| 
						 | 
				
			
			@ -13852,6 +13893,16 @@
 | 
			
		|||
      "resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-1.0.0.tgz",
 | 
			
		||||
      "integrity": "sha512-0jbp4RxjYopTsIdLl+/Fy2TiwVYHy4mgeu07DG4b/LyM0OS/+lPP5c9sbnt/AMlnF6qz2JRZpPpGw1eMNS6A4w=="
 | 
			
		||||
    },
 | 
			
		||||
    "@react-navigation/bottom-tabs": {
 | 
			
		||||
      "version": "6.3.2",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.3.2.tgz",
 | 
			
		||||
      "integrity": "sha512-uS0XV2aH7bAW54Zuf5ks2V60riarbMALyMz3cB3204l4aGhx41UPUIr/K72pGAVdIPizpjz8Fk8qwczAwex9eg==",
 | 
			
		||||
      "requires": {
 | 
			
		||||
        "@react-navigation/elements": "^1.3.4",
 | 
			
		||||
        "color": "^4.2.3",
 | 
			
		||||
        "warn-once": "^0.1.0"
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "@react-navigation/core": {
 | 
			
		||||
      "version": "6.2.2",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.2.2.tgz",
 | 
			
		||||
| 
						 | 
				
			
			@ -14265,6 +14316,11 @@
 | 
			
		|||
      "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
 | 
			
		||||
      "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
 | 
			
		||||
    },
 | 
			
		||||
    "@types/cookie": {
 | 
			
		||||
      "version": "0.3.3",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
 | 
			
		||||
      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
 | 
			
		||||
    },
 | 
			
		||||
    "@types/graceful-fs": {
 | 
			
		||||
      "version": "4.1.5",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
 | 
			
		||||
| 
						 | 
				
			
			@ -15145,6 +15201,11 @@
 | 
			
		|||
        "safe-buffer": "~5.1.1"
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "cookie": {
 | 
			
		||||
      "version": "0.4.2",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
 | 
			
		||||
      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA=="
 | 
			
		||||
    },
 | 
			
		||||
    "copy-descriptor": {
 | 
			
		||||
      "version": "0.1.1",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
 | 
			
		||||
| 
						 | 
				
			
			@ -19577,6 +19638,15 @@
 | 
			
		|||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "universal-cookie": {
 | 
			
		||||
      "version": "4.0.4",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
 | 
			
		||||
      "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
 | 
			
		||||
      "requires": {
 | 
			
		||||
        "@types/cookie": "^0.3.3",
 | 
			
		||||
        "cookie": "^0.4.0"
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "universalify": {
 | 
			
		||||
      "version": "1.0.0",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -18,6 +18,7 @@
 | 
			
		|||
  },
 | 
			
		||||
  "dependencies": {
 | 
			
		||||
    "@react-native-community/masked-view": "^0.1.11",
 | 
			
		||||
    "@react-navigation/bottom-tabs": "^6.3.2",
 | 
			
		||||
    "@react-navigation/native": "^6.0.11",
 | 
			
		||||
    "@react-navigation/native-stack": "^6.7.0",
 | 
			
		||||
    "@react-navigation/stack": "^6.2.2",
 | 
			
		||||
| 
						 | 
				
			
			@ -32,7 +33,8 @@
 | 
			
		|||
    "react-native-safe-area-context": "3.3.2",
 | 
			
		||||
    "react-native-screens": "~3.10.1",
 | 
			
		||||
    "react-native-svg": "12.1.1",
 | 
			
		||||
    "react-native-web": "0.17.1"
 | 
			
		||||
    "react-native-web": "0.17.1",
 | 
			
		||||
    "universal-cookie": "^4.0.4"
 | 
			
		||||
  },
 | 
			
		||||
  "devDependencies": {
 | 
			
		||||
    "@babel/core": "^7.12.9"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue