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 { View } from 'react-native'
|
||||
import { SafeAreaView, ScrollView} from 'react-native'
|
||||
|
||||
|
||||
export const Background = ({ children }: {children: JSX.Element | JSX.Element[]}) => {
|
||||
return (
|
||||
<>
|
||||
<View className='flex grow items-center bg-sky-50 p-4'>
|
||||
{children}
|
||||
</View>
|
||||
<SafeAreaView className='flex grow justify-center'>
|
||||
|
||||
<ScrollView
|
||||
contentContainerStyle={{
|
||||
flexGrow: 1,
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
{children}
|
||||
|
||||
</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 { 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 extends StackScreenProps<any, any> {
|
||||
|
||||
interface Props {
|
||||
}
|
||||
|
||||
export const SalesOrderScreen:FC <Props> = () => {
|
||||
export const SalesOrderScreen:FC <Props> = ({navigation}) => {
|
||||
const {isAuthenticated, logOut} = useContext(AuthContext);
|
||||
|
||||
const exit = () => {
|
||||
logOut();
|
||||
navigation.navigate("CustomerScreen");
|
||||
}
|
||||
|
||||
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