clientes
parent
13f41ee7ae
commit
3ac1dd6b9d
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 13 KiB |
@ -1,12 +1,24 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { View } from 'react-native'
|
import { SafeAreaView, ScrollView} from 'react-native'
|
||||||
|
|
||||||
|
|
||||||
export const Background = ({ children }: {children: JSX.Element | JSX.Element[]}) => {
|
export const Background = ({ children }: {children: JSX.Element | JSX.Element[]}) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<View className='flex grow items-center bg-sky-50 p-4'>
|
<SafeAreaView className='flex grow justify-center'>
|
||||||
|
|
||||||
|
<ScrollView
|
||||||
|
contentContainerStyle={{
|
||||||
|
flexGrow: 1,
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center'
|
||||||
|
}}>
|
||||||
{children}
|
{children}
|
||||||
</View>
|
|
||||||
|
</ScrollView>
|
||||||
|
|
||||||
|
</SafeAreaView>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import { FC } from 'react'
|
||||||
|
import { View, TouchableOpacity, Image, Text, ImageSourcePropType } from 'react-native'
|
||||||
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
require: (id: string) => any ,
|
||||||
|
label: string,
|
||||||
|
destino:string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MenuItem:FC <Props> = ({require,label, destino}) => {
|
||||||
|
const navitation = useNavigation();
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<View className='mx-2'>
|
||||||
|
<TouchableOpacity
|
||||||
|
className='items-center'
|
||||||
|
onPress={()=>navitation.navigate(destino as never)}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
source={require as ImageSourcePropType}
|
||||||
|
className='w-8 h-8 my-2'
|
||||||
|
/>
|
||||||
|
|
||||||
|
</TouchableOpacity>
|
||||||
|
{/*<Text className='text-xs text-center' >{label}</Text>*/}
|
||||||
|
</View>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
import { FC } from 'react'
|
||||||
|
import { Image, Text, TouchableOpacity, View } from 'react-native'
|
||||||
|
import { Card } from '../Card';
|
||||||
|
import { MenuItem } from './MenuItem';
|
||||||
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
}
|
||||||
|
|
||||||
|
export const NavBar:FC <Props> = () => {
|
||||||
|
|
||||||
|
const navigation = useNavigation();
|
||||||
|
return (
|
||||||
|
<Card addClassName='flex-row p-0 self-center' >
|
||||||
|
|
||||||
|
<MenuItem destino='CompanyScreen' require={require('./tienda-alt.png')} label='Compañias' />
|
||||||
|
|
||||||
|
<MenuItem destino='CustomerScreen' require={require('./apreton-de-manos.png')} label='Clientes' />
|
||||||
|
|
||||||
|
<View className='mx-2 -translate-y-4'>
|
||||||
|
<TouchableOpacity
|
||||||
|
className='bg-sky-300 rounded-full p-3 items-center shadow-lg shadow-slate-800 -translate-y-2'
|
||||||
|
onPress={()=>navigation.navigate("SalesOrderScreen" as never) }
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
source={require('./lista.png')}
|
||||||
|
className='w-10 h-10 '
|
||||||
|
/>
|
||||||
|
|
||||||
|
</TouchableOpacity>
|
||||||
|
<Text className='text-xs text-center'>Pedidos</Text>
|
||||||
|
</View>
|
||||||
|
<MenuItem destino='ProductScreen' require={require('./caja-abierta.png')} label='Productos' />
|
||||||
|
<MenuItem destino='' require={require('./menu-puntos.png')} label='Mas' />
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { FC } from 'react'
|
||||||
|
import { View, TouchableOpacity, Image, Text, ImageSourcePropType } from 'react-native'
|
||||||
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
require: (id: string) => any,
|
||||||
|
focused?: boolean,
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TabItem:FC <Props> = ({require,focused}) => {
|
||||||
|
let className = "w-8 h-8 ";
|
||||||
|
if (focused){
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View className=''>
|
||||||
|
<Image
|
||||||
|
source={require as ImageSourcePropType}
|
||||||
|
className={className}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
)
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 13 KiB |
@ -0,0 +1,93 @@
|
|||||||
|
import { FC } from 'react'
|
||||||
|
import { Dimensions, Text, View } from 'react-native'
|
||||||
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
||||||
|
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
||||||
|
|
||||||
|
import { CompanyScreen } from '../screens/company/CompanyScreen';
|
||||||
|
import { MenuItem } from '../components/navbar/MenuItem';
|
||||||
|
import { TabItem } from '../components/navbar/TabItem';
|
||||||
|
import { SalesOrderScreen } from '../screens/salesorder/SalesOrderScreen';
|
||||||
|
import { ProductScreen } from '../screens/product/ProductScreen';
|
||||||
|
import { ExitScreen } from '../screens/exit/ExitScreen';
|
||||||
|
import { CustomerListScreen } from '../screens/customer/CustomerListScreen';
|
||||||
|
import { CustomerStack } from '../screens/customer/CustomerStack';
|
||||||
|
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TabScreen:FC <Props> = () => {
|
||||||
|
const Tab = createBottomTabNavigator();
|
||||||
|
const { width, height } = Dimensions.get("window")
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
className="h-screen"
|
||||||
|
>
|
||||||
|
<Tab.Navigator
|
||||||
|
initialRouteName="SalesOrderScreen"
|
||||||
|
screenOptions={{
|
||||||
|
headerShown: false,
|
||||||
|
tabBarActiveTintColor: '#1e40af',
|
||||||
|
tabBarHideOnKeyboard: true,
|
||||||
|
tabBarStyle: {
|
||||||
|
borderRadius: 20,
|
||||||
|
marginBottom: 30
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
|
||||||
|
>
|
||||||
|
<Tab.Screen
|
||||||
|
name="Customer List Screen"
|
||||||
|
component={CustomerStack}
|
||||||
|
options={{
|
||||||
|
tabBarLabel: 'Clientes',
|
||||||
|
tabBarLabelStyle: {fontSize: 12},
|
||||||
|
tabBarIcon: ({ focused }) => (
|
||||||
|
<TabItem require={require('./apreton-de-manos.png')} focused={focused} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Tab.Screen
|
||||||
|
name="CompanyScreen"
|
||||||
|
component={CompanyScreen}
|
||||||
|
options={{
|
||||||
|
tabBarLabel: 'Compañias',
|
||||||
|
tabBarIcon: ({ focused}) => (
|
||||||
|
<TabItem require={require('./tienda-alt.png')} focused={focused} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Tab.Screen
|
||||||
|
name="SalesOrderScreen"
|
||||||
|
component={SalesOrderScreen}
|
||||||
|
options={{
|
||||||
|
tabBarLabel: 'Pedidos',
|
||||||
|
tabBarIcon: ({ focused }) => (
|
||||||
|
<TabItem require={require('./lista.png')} focused={focused} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Tab.Screen
|
||||||
|
name="ProductScreen"
|
||||||
|
component={ProductScreen}
|
||||||
|
options={{
|
||||||
|
tabBarLabel: 'Productos',
|
||||||
|
tabBarIcon: ({ focused }) => (
|
||||||
|
<TabItem require={require('./caja-abierta.png')} focused={focused} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Tab.Screen
|
||||||
|
name="ExitScreen"
|
||||||
|
component={ExitScreen}
|
||||||
|
options={{
|
||||||
|
tabBarLabel: 'Salir',
|
||||||
|
tabBarIcon: ({ focused }) => (
|
||||||
|
<TabItem require={require('./salida.png')} focused={focused} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tab.Navigator>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 13 KiB |
@ -0,0 +1,33 @@
|
|||||||
|
import { FC } from 'react'
|
||||||
|
import { Text } from 'react-native'
|
||||||
|
import { NavBar } from '../../components/navbar/NavBar'
|
||||||
|
import { Background } from '../../components/Background'
|
||||||
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
import { Button } from '../../components/Button';
|
||||||
|
import { Card } from '../../components/Card';
|
||||||
|
import { Input } from '../../components/Input';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
interface Props {
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CustomerFormScreen:FC <Props> = () => {
|
||||||
|
const { control, handleSubmit, getValues, formState: { errors } } = useForm();
|
||||||
|
const navigation = useNavigation();
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Background >
|
||||||
|
<Card>
|
||||||
|
<Text className='text-xl text-center my-4'>Registro de clientes</Text>
|
||||||
|
<Input name="nombre" label='Nombre' control={control} />
|
||||||
|
<Input name="telefono" label='Telefono' control={control} />
|
||||||
|
<Button
|
||||||
|
title='Guardar'
|
||||||
|
onClick={()=>{navigation.navigate("ProductScreen" as never) }}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
</Background>
|
||||||
|
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { FC } from 'react'
|
||||||
|
import { Text } from 'react-native'
|
||||||
|
import { Background } from '../../components/Background'
|
||||||
|
import { Card } from '../../components/Card'
|
||||||
|
import { Input } from '../../components/Input'
|
||||||
|
import { Button } from '../../components/Button'
|
||||||
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CustomerListScreen:FC <Props> = () => {
|
||||||
|
const navigation = useNavigation();
|
||||||
|
return (
|
||||||
|
<Background >
|
||||||
|
<Card>
|
||||||
|
<Text className='text-xl text-center my-4'>Listado de clientes</Text>
|
||||||
|
<Button title='Nuevo' onClick={()=>navigation.navigate("CustomerFormScreen" as never)} />
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
</Background>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,13 +0,0 @@
|
|||||||
import { FC } from 'react'
|
|
||||||
import { Text } from 'react-native'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
}
|
|
||||||
|
|
||||||
export const CustomerScreen:FC <Props> = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Text>CustomerScreen</Text>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import { FC, useContext, useState } from 'react'
|
||||||
|
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||||
|
import { AuthContext } from '../login/AuthContext';
|
||||||
|
import { CustomerFormScreen } from './CustomerFormScreen';
|
||||||
|
import { CustomerListScreen } from './CustomerListScreen';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
}
|
||||||
|
const Stack = createNativeStackNavigator();
|
||||||
|
|
||||||
|
export const CustomerStack:FC <Props> = () => {
|
||||||
|
const {isAuthenticated} = useContext(AuthContext)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack.Navigator
|
||||||
|
screenOptions={{
|
||||||
|
headerShown: true,
|
||||||
|
}}
|
||||||
|
|
||||||
|
>
|
||||||
|
{!isAuthenticated&&(
|
||||||
|
<>
|
||||||
|
<Stack.Screen name="CustomerListScreen" component={CustomerListScreen} />
|
||||||
|
<Stack.Screen name="CustomerFormScreen" component={CustomerFormScreen} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</Stack.Navigator>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import { FC, useContext } from 'react'
|
||||||
|
import { Text } from 'react-native'
|
||||||
|
import { Background } from '../../components/Background'
|
||||||
|
import { NavBar } from '../../components/navbar/NavBar'
|
||||||
|
import { Button } from '../../components/Button'
|
||||||
|
import { AuthContext } from '../login/AuthContext';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ExitScreen:FC <Props> = () => {
|
||||||
|
|
||||||
|
const {isAuthenticated, logOut} = useContext(AuthContext);
|
||||||
|
const exit = () => {
|
||||||
|
logOut();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Background >
|
||||||
|
<Text>Adios</Text>
|
||||||
|
|
||||||
|
<Button title='LogOut' onClick={()=>exit()} />
|
||||||
|
|
||||||
|
</Background>
|
||||||
|
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,29 +0,0 @@
|
|||||||
import { FC, useContext } from 'react'
|
|
||||||
import { Text } from 'react-native'
|
|
||||||
import { Button } from '../../components/Button'
|
|
||||||
import { StackScreenProps } from '@react-navigation/stack';
|
|
||||||
import { View } from 'react-native';
|
|
||||||
import { AuthContext } from '../login/AuthContext';
|
|
||||||
|
|
||||||
interface Props extends StackScreenProps<any, any> {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export const HomeScreen:FC <Props> = ({navigation}) => {
|
|
||||||
const {isAuthenticated, logOut} = useContext(AuthContext);
|
|
||||||
console.debug(isAuthenticated)
|
|
||||||
const exit = () => {
|
|
||||||
logOut();
|
|
||||||
navigation.navigate("CustomerScreen");
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
|
|
||||||
<View className='flex-1 items-center bg-white '>
|
|
||||||
<Text>Home</Text>
|
|
||||||
<Button title='Clientes' onClick={()=>navigation.navigate("CustomerScreen")}/>
|
|
||||||
<Button title='LogOut' onClick={()=>exit()} />
|
|
||||||
</View>
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,13 +1,34 @@
|
|||||||
import { FC } from 'react'
|
import { FC, useContext } from 'react'
|
||||||
import { Text } from 'react-native'
|
import { Text } from 'react-native'
|
||||||
|
import { Button } from '../../components/Button'
|
||||||
|
import { StackScreenProps } from '@react-navigation/stack';
|
||||||
|
import { View } from 'react-native';
|
||||||
|
import { AuthContext } from '../login/AuthContext';
|
||||||
|
import { Background } from '../../components/Background';
|
||||||
|
import { NavBar } from '../../components/navbar/NavBar';
|
||||||
|
|
||||||
interface Props {
|
interface Props extends StackScreenProps<any, any> {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SalesOrderScreen:FC <Props> = ({navigation}) => {
|
||||||
|
const {isAuthenticated, logOut} = useContext(AuthContext);
|
||||||
|
|
||||||
|
const exit = () => {
|
||||||
|
logOut();
|
||||||
|
navigation.navigate("CustomerScreen");
|
||||||
}
|
}
|
||||||
|
|
||||||
export const SalesOrderScreen:FC <Props> = () => {
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Text>Sales order</Text>
|
<Background >
|
||||||
|
<Text>Pedidos</Text>
|
||||||
|
<Button title='Clientes' onClick={()=>navigation.navigate("CustomerScreen")}/>
|
||||||
|
<Button title='LogOut' onClick={()=>exit()} />
|
||||||
|
|
||||||
|
</Background>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
After Width: | Height: | Size: 15 KiB |
Loading…
Reference in new issue