From 50995a06e39470b9af6c559bdb27f2b31a23894c Mon Sep 17 00:00:00 2001
From: Maria Sanchez <paosanchez30@hotmail.com>
Date: Wed, 17 Aug 2022 10:36:33 -0600
Subject: [PATCH] reservas screen

---
 mobile-ui/App.js                 |  30 ++++++-
 mobile-ui/components/Home.js     | 143 ++++++++++++++++++-----------
 mobile-ui/components/LogIn.js    |   6 +-
 mobile-ui/components/Profile.js  |  15 ++++
 mobile-ui/components/Reservas.js | 148 +++++++++++++++++++++++++++++++
 mobile-ui/package-lock.json      |  28 ++++++
 mobile-ui/package.json           |   1 +
 7 files changed, 314 insertions(+), 57 deletions(-)
 create mode 100644 mobile-ui/components/Reservas.js

diff --git a/mobile-ui/App.js b/mobile-ui/App.js
index 8c45b000..61dbd821 100644
--- a/mobile-ui/App.js
+++ b/mobile-ui/App.js
@@ -4,24 +4,48 @@ import {
 } 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"; 
 
 const Stack = createNativeStackNavigator();
+const Tab = createBottomTabNavigator(); 
 
+
+function HomeTab() {
+
+  return (
+    <Tab.Navigator initialRouteName="Comunicados" > 
+    <Tab.Screen  name="Comunicados" component={Home} options={{headerStyle: {
+      backgroundColor: "#D7A86E"
+    }}}/> 
+    <Tab.Screen  name="Reservas" component={Reservas } options={{headerStyle: {
+      backgroundColor: "#D7A86E"
+    }}}/> 
+    <Tab.Screen  name="Perfil" component={Profile} options={{headerStyle: {
+      backgroundColor: "#D7A86E"
+    }}}/> 
+  </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="Inicio" component={LogIn} options={{headerStyle: {
+      backgroundColor: "#D7A86E"
+    }}} />
+        <Stack.Screen name="Comunicados" component={HomeTab} options={{headerShown: false}} />
         <Stack.Screen name="Password" component={RecoverPassword} />
       </Stack.Navigator>
+
+    
     </NavigationContainer>
-      
     </NativeBaseProvider>
   );
 }
\ No newline at end of file
diff --git a/mobile-ui/components/Home.js b/mobile-ui/components/Home.js
index f344f44c..d8806dc9 100644
--- a/mobile-ui/components/Home.js
+++ b/mobile-ui/components/Home.js
@@ -1,60 +1,103 @@
-import React from 'react';
+import React from "react";
 import {
     Text,
     HStack,
+    Badge,
     Box,
-    Icon, 
-    MaterialIcons,
-    Center, 
-    Pressable
+Pressable,
+    Spacer, 
+    Flex,
+    Center
   } from "native-base";
+  import { MaterialCommunityIcons } from '@expo/vector-icons'; 
+export default function Home(){
 
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-
-export default function Home({navigation}){
-
-  const [selected, setSelected] = React.useState(1);
-
+  const [selected, setSelected] = React.useState(0);
     return (
+
+      <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>
+          <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>
       
-   <Box flex={1} bg="white" safeAreaTop width="100%" maxW="300px" alignSelf="center">
-        <Center flex={1}></Center>
-        <HStack bg="indigo.600" alignItems="center" safeAreaBottom shadow={6}>
-          <Pressable opacity={selected === 0 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(0)}>
-            <Center>
-              <Icon mb="1" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="white" size="sm" />
-              <Text color="white" fontSize="12">
-                Inicio
-              </Text>
-            </Center>
-          </Pressable>
-          <Pressable opacity={selected === 1 ? 1 : 0.5} py="2" flex={1} onPress={() => setSelected(1)}>
-            <Center>
-              <Icon mb="1" as={<MaterialIcons name="search" />} color="white" size="sm" />
-              <Text color="white" fontSize="12">
-                 Comunicados
-              </Text>
-            </Center>
-          </Pressable>
-          <Pressable opacity={selected === 2 ? 1 : 0.6} py="2" flex={1} onPress={() => setSelected(2)}>
-            <Center>
-              <Icon mb="1" as={<MaterialCommunityIcons name={selected === 2 ? 'cart' : 'cart-outline'} />} color="white" size="sm" />
-              <Text color="white" fontSize="12">
-                Reservas
-              </Text>
-            </Center>
-          </Pressable>
-          <Pressable opacity={selected === 3 ? 1 : 0.5} py="2" flex={1} onPress={() => setSelected(3)}>
-            <Center>
-              <Icon mb="1" as={<MaterialCommunityIcons name={selected === 3 ? 'account' : 'account-outline'} />} color="white" size="sm" />
-              <Text color="white" fontSize="12">
-                Perfil
-              </Text>
-            </Center>
-          </Pressable>
-        </HStack>
-      </Box>
-   
        
-    );
+      //   <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>
+       
+    )
 }
\ No newline at end of file
diff --git a/mobile-ui/components/LogIn.js b/mobile-ui/components/LogIn.js
index fd63d793..63e5ba83 100644
--- a/mobile-ui/components/LogIn.js
+++ b/mobile-ui/components/LogIn.js
@@ -7,10 +7,8 @@ import {
   VStack,
   Box,
   FormControl,
-  Input,
   Button,
-  Image,
-  Container
+  Image
 } from "native-base";
 import logo from "../assets/logo-katoikia.png";
 import { Entypo } from '@expo/vector-icons'; 
@@ -115,7 +113,7 @@ export default function LogIn({navigation}) {
                
               </Link>
             </FormControl>
-            <Button  mt="2" colorScheme="primary" onPress={() => navigation.navigate('Home')}
+            <Button  mt="2" colorScheme="primary" onPress={() => navigation.navigate('Comunicados')}
             >
               <Text>Continuar</Text>
             </Button>
diff --git a/mobile-ui/components/Profile.js b/mobile-ui/components/Profile.js
index e69de29b..5c75931c 100644
--- a/mobile-ui/components/Profile.js
+++ b/mobile-ui/components/Profile.js
@@ -0,0 +1,15 @@
+import React from "react";
+
+import {
+    Box
+  } from "native-base";
+
+export default function Profile(){
+
+    return (
+        <Box> 
+
+
+        </Box>
+    )
+}
\ No newline at end of file
diff --git a/mobile-ui/components/Reservas.js b/mobile-ui/components/Reservas.js
new file mode 100644
index 00000000..08af073f
--- /dev/null
+++ b/mobile-ui/components/Reservas.js
@@ -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" _dark={{
+      bg: "coolGray.200:alpha.20"
+    }} _light={{
+      bg: "coolGray.200:alpha.20"
+    }}>
+        <Fab renderInPortal={false} shadow={2} size="sm" icon={<Icon color="white" as={AntDesign} name="plus" size="sm" />} />
+      </Box>
+    </ScrollView>
+  );
+
+
+ 
+}
\ No newline at end of file
diff --git a/mobile-ui/package-lock.json b/mobile-ui/package-lock.json
index 860e1166..45d893cb 100644
--- a/mobile-ui/package-lock.json
+++ b/mobile-ui/package-lock.json
@@ -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",
@@ -3533,6 +3534,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",
@@ -13852,6 +13870,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",
diff --git a/mobile-ui/package.json b/mobile-ui/package.json
index 7b717cc6..43ee388e 100644
--- a/mobile-ui/package.json
+++ b/mobile-ui/package.json
@@ -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",